在我的Angular 4应用程序中,当我使用新值更新数组时,不是向我显示新值,而是将值附加到DOM . 我曾经使用过一百万次,但从未遇到过如此奇怪的行为 .
这是我的HTML
<div class="roles-list" *ngIf="branchEmployees && branchEmployees.length > 0">
<div class="roles-item" *ngFor="let branchEmployee of branchEmployees">
<div class="branch-image" [ngStyle]="{'background-image': 'url(' + branchEmployee.branch.organisation.profile_photo_urls.thumb + ')'}">
</div>
<div class="branch-name">
{{ branchEmployee.branch.name }}
</div>
<div class="branch-employee-role">
<select (change)="employeeRoleChange($event.target.value, branchEmployee.id)" [(ngModel)]="branchEmployee.access_type">
<option value="user">{{'User'}}</option>
<option value="admin">{{'Admin'}}</option>
</select>
</div>
</div>
</div>
这是我的组件
this.branchEmployees = [];
this.model.get({name: `people/${this.selectedEmployee.person.id}/branch_employees`}).subscribe(branchEmployees => {
this.branchEmployees = branchEmployees
})
组件中的上述代码在单击某个按钮时运行 . 我可以验证变量this.branchEmployees是否具有适当数量的值,但不知何故这些值在DOM中没有被替换但是被追加,这个行为不仅仅适用于这个ngFor,它适用于此组件中的每个ngFor循环!