2016-06-21 10 views
2

Ich habe eine *ngFor Richtlinie verwendet, die in einem Array für jedes Element eine Komponente angezeigt werden: -ngFor Werte zu wiederholen, wenn ein Array von Objekten ändernden

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

Wenn eine dieser Komponenten feuert ein update Ereignis, dann ist die Die Hostkomponente ruft einen Dienst auf, der einen Server trifft und eine aktuelle Kopie der Daten als Array erhält. Dies wird auf ngOnInit auch genannt

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

jedoch die inital Daten zu erhalten, diese die neuen Daten an die Spitze des alten zu vorangestellt scheint. Wenn ich zum Beispiel zwei Zeilen habe, eine für Andy und eine für Bob, und ich die Bob-Reihe lösche, sehe ich jetzt Andy, Andy, Bob. Zu diesem Zeitpunkt enthält mein Benutzer-Array auch nur den einzigen Eintrag für Andy. Ich bin ziemlich neu bei Angular2, was fehlt mir?

Edit: Dies ist die Service-Methode, die die Lösch tut:

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

} 

Und die Funktion, die es (im UserRowComponent) ruft:

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

    }); 

}

+0

* "Ich lösche die Bob-Reihe ..." * - wie machst du das? – dfsq

+0

Der Dienst ruft einen REST-Webdienst auf, um den Benutzer zu löschen, und die Komponente löst nach Abschluss der Anforderung ein 'update'-Ereignis aus, das eine neue Kopie der Benutzerdaten abruft. –

+0

Bitte zeigen Sie uns diese Methode löschen oder update-Ereignis, wo Sie einen Benutzer entfernen. – rinukkusu

Antwort

1

ich das verfolgt ausstellen. Das ist mein komplettes 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> 

Weil ich die Struktur einer Tabelle bin emuliert, und wollte die app-user-row Komponente erhalten korrekt als Tabellenzeile angezeigt werden, ich bin mit so etwas wie die Methode here diskutiert , die mit *ngFor nicht nett zu spielen scheint. Ich denke, ich muss mein Layout überdenken.

Verwandte Themen