ngFor repeating values when changing an array of objects

Question

I have an *ngFor directive being used to display a component for each element in an array: -

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

If one of those components fires an update event, then the host component will call a service, which hits a server and gets an up to date copy of the data as an array. This also gets called on ngOnInit to get the inital data

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

However, this seems to prepend the new data to the top of the old. For example, if I have 2 rows, one for Andy, and one for Bob, and I delete the Bob row, I'll now see Andy, Andy, Bob. At this point, my users array will also only contain the single entry for Andy. I'm pretty new to Angular2, what am I missing?

Edit: This is the service method that does the delete:

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);

}

And the function that calls it (in the UserRowComponent):

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

  });

}

The service hits a REST web service to delete the user, and the component fires an `update` event when the request has completed, which gets a new copy of the user data. — Digital-Clouds, Jun 21 '16 at 09:08
Please show us that delete method or update event where you remove a user. — Maximilian Riegler, Jun 21 '16 at 09:09
Can you confirm that after delete request user is really deleted, and subsequent updateUsers fetches updated array of users? — dfsq, Jun 21 '16 at 10:06
I've put some logging in `updateUsers` after `this.users = res`, which outputs `this.users`. It's correct, and doesn't have the deleted user in the array. — Digital-Clouds, Jun 21 '16 at 10:16
so you are saying that `console.log(res); this.users = res;`in `updateUsers` would log correct array, but then `this.users` would still be wrong? I don't think this is possible. — dfsq, Jun 21 '16 at 10:24
Both `this.users` and `res` output correctly to the console. But I see more in elements in my `*ngFor` than I do in my array, with duplicates. — Digital-Clouds, Jun 21 '16 at 10:27
Ah, I think I know the issue. As I'm repeating a component inside a structure that emulates a `` element using `display:table-*` CSS, the `app-user-row` component does something like this: http://stackoverflow.com/a/35837189/2594536. If I remove that code, it works perfectly. Well, other than the formatting, which I clearly need to rethink. — Digital-Clouds, Jun 21 '16 at 10:45

score 1 · Accepted Answer · edited May 23 '17 at 12:17

I tracked the issue down. This is my complete set up:

<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>

Because I'm emulating the structure of a table, and wanted to get the app-user-row component to display correctly as a table row, I'm using something like the method discussed here, which doesn't seem to play nice with *ngFor. I think I'm going to have to rethink my layout.

ngFor repeating values when changing an array of objects

1 Answers1