* ngFor Verhalten auf primitiven Datentyp

Question

Ich habe eine Liste von Objekten, die ich mit einem *ngFor auf der HTML-Seite anzeigen. Jetzt interagiert der Benutzer mit der Benutzeroberfläche und ändert einen der Grundwerte (Boolesch, von falsch bis wahr).

Nach meinem Verständnis die *ngFor wird nur die Änderungen rendern, wenn das Listenobjekt vollständig geändert, d. H. Entfernt und erneut zur Liste hinzugefügt. Wenn ich mit diesem Konzept recht habe, können Sie dann eine Methode vorschlagen, die die Änderung des primitiven Typs widerspiegelt, ohne die Komponente neu zu initialisieren oder die Objektreferenz zu ändern.

Beispiel:

<div *ngFor="let item of list"> 
     <md-checkbox [(ngModel)]="item.selected"></md-checkbox> 
    </div> 

Benutzer klickt auf das Kontrollkästchen, aber das Kontrollkästchen hat, nachdem bestimmte Validierungen von Server zu tickte. Nehmen wir an, das Kontrollkästchen muss deaktiviert sein und der Benutzer erhält eine Nachricht auf der Snackbar. Also gehe ich durch die Liste und ändere item.selected auf false. Die Änderung wird jedoch nicht berücksichtigt, da ich den ausgewählten primitiven Typ (boolean) im Objektelement geändert habe. So, wie man den neuen Wert rendert, ohne die Seite neu zu laden oder zu initialisieren.

Bitte lassen Sie mich wissen, wenn mehr Eingabe erforderlich ist.

Answer 1

Wenn Sie primitive Werte verwenden, müssen Sie trackBy

<div *ngFor="let item of list trackBy:trackByIdx"> 
     <md-checkbox [(ngModel)]="item.selected"></md-checkbox> 
    </div> 

trackByIdx(index: number, obj: any): any { 
    return index; 
    } 

Siehe auch Angular2 NgFor inside tree model: wrong order when remove and then add elements

Update nach der folgenden Diskussion

Das Ändern eines booleschen Werts, der durch ngModel gebunden ist, wenn der Eingabewert geändert wird, kann dazu führen, dass ngModel nicht aktualisiert wird. Das Hinzufügen einer künstlichen Änderung und eines Calligns detectChanges kann verwendet werden, um zu umgehen.

constructor(private cdRef:ChangeDetectorRef) {} 

deactivate(index: number) { 
    this.list[index][0] = true; 
    this.cdRef.detectChanges(); 
    this.list[index][0] = false; 
    this.cdRef.detectChanges(); 
    console.log(this.list); 
} 

Plunker example