2

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) => {

  });

}

9
  • "I delete the Bob row..." - how do you do it? Commented Jun 21, 2016 at 9:06
  • 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. Commented Jun 21, 2016 at 9:08
  • Please show us that delete method or update event where you remove a user. Commented Jun 21, 2016 at 9:09
  • Have edited the question with those bits of code Commented Jun 21, 2016 at 9:16
  • Can you confirm that after delete request user is really deleted, and subsequent updateUsers fetches updated array of users? Commented Jun 21, 2016 at 10:06

1 Answer 1

1

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.