Question

我有一个*ngFor指令用于显示数组中每个元素的组件： -

<app-user-row *ngFor="let user of users" 
              [user]="user" 
              (update)="updateUsers()"></app-user-row>

如果其中一个组件触发update事件，则主机组件将调用服务，该服务命中服务器并获取数据的最新副本作为数组。这也会在ngOnInit上调用以获取初始数据

private updateUsers() {
  this.userManagementService.getUsers().subscribe((res) => {
    this.users = res;
  },
  (error) => {
    console.log(error);
  });
}

然而，这似乎是将新数据添加到旧数据之上。例如，如果我有2行，一个用于Andy，一个用于Bob，我删除了Bob行，我现在将看到Andy，Andy，Bob。此时，我的users数组也只包含Andy的单个条目。我对Angular2很新，我缺少什么？

编辑：这是执行删除的服务方法：

public deleteUser(user:User){

  let headers = new Headers({
    'Accept': 'application/json'
  });
  let options = new RequestOptions({headers});

  return this.http.delete(`${this.apiBaseUrl}Account/user/${user.id}`, options);

}

调用它的函数（在UserRowComponent中）：

onDelete() {
  this.userManagementService.deleteUser(this.user).subscribe((res) => {
    this.update.emit(this.user);
  },
  (error) => {

  });

}

Answer 1

我追踪了这个问题。这是我的完整设置：

<div class="table">
  <div class="tr">
    <span class="td th">User Name</span>
    <span class="td th">Change Password</span>
    <span class="td th">User Permissions</span>
    <span class="td th">Admin Permissions</span>
    <span class="td th"></span>
    <span class="td th"></span>
  </div>
  <app-user-row *ngFor="let user of users" [user]="user" (update)="updateUsers()"></app-user-row>
</div>

因为我正在模拟表格的结构，并希望让app-user-row组件正确显示为表格行，所以我使用的方法类似于所讨论的方法{{3} }，似乎与*ngFor不相称。我想我将不得不重新考虑我的布局。

ng在更改对象数组时重复值

1 个答案: