在我的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循环!