Angular2 NgFor Array in Ausdruck binden

Question

Das Array, das in der ngfor-Schleife verwendet wird, wenn es aktualisiert wird, wie erhalten Sie Angular2 diesen Ausdruck erneut auszuführen? Momentan gibt es nichts aus, weil es am Anfang mit einem leeren Array läuft - einmal aktualisiert (das Array wurde verändert) wird der ngfor Ausdruck nicht erneut ausgeführt - was die gewünschte Funktionalität ist. Wie wird das gemacht?

Zum Beispiel in der Komponente HTML;

<option *ngFor="let user of users" [value]="user.id">{{user.name}}</option> 

In der Komponente TS haben wir eine Eigenschaft deklariert;

users: IUser[] = []; 

In ngOnInit haben wir einen Aufruf an einen TS-Dienst, der uns die Benutzerdaten zurückgibt;

this.userDataService.getUsers().subscribe(data => { 
    this.users = data; 
}); 

Aktualisierter Codebeispiel;

@Component({ 
    selector: 'app-manage-user', 
    templateUrl: './user-form.component.html', 
    providers: [UsersDataService] 
}) 
export class UserFormComponent implements OnInit { 

    constructor(private userDataService: UsersDataService) { 

    } 

    users: IUser[] = []; 

    ngOnInit() { 
    this.userDataService.getUsers().subscribe(user => { 
     this.users = user; 
    }); 
    } 
} 

Answer 1

Sie können ChangeDetectorRef verwenden, um Änderungen zu erkennen.

import {ChangeDetectorRef} from '@angular/core'; 

in Ihrem Konstruktor Injizieren Sie es und rufen detectChanges() -Methode, wenn der Wert des Array geändert wird:

constructor(private userDataService: UsersDataService, private changeDetector: ChangeDetectorRef) { 

    } 

    users: IUser[] = []; 

    ngOnInit() { 
    this.userDataService.getUsers().subscribe(user => { 
     this.users = user; 
     this.changeDetector.detectChanges(); 
    }); 
    } 

Answer 2

Ich würde vorschlagen, es gerne verwenden:

<select *ngIf="users.length >0"> 
<option *ngFor="let user of users" [value]="user.id">{{user.name}}</option> 
</select 

Answer 3

Sie können prüfen, weil Anfrage schnelles Array nicht aktualisiert:

ngOnInit() { 
    this.userDataService.getUsers().subscribe(user => { 
     if(user){ 
     this.users = user; 
     } 
    }); 
    }