Warum verliert ngFor die Daten, wenn ngIf ändert?

Question

Ich habe stieß auf sehr interessante Frage. Ich habe folgende HTML:

<div *ngIf="flag" *ngFor="#obj of myArr.gear">{{obj | json}}</div> 

Und in der Komponente, die ich ändern, die die Flagge alle 1 sec:

setInterval(()=>{ 
    this.flag = !this.flag; 
    console.log(this.myArr); 
},1000) 

Nun, wie Sie here sehen können, gibt es zwei interessante Dinge, die passieren, wenn ich das ändern Flagge:

1. Wenn ich Flagge zum ersten Mal zu ändern, scheint ngFor erneut aufgerufen werden, das Hinzufügen null zu dem hTML-Code.
2. Wenn das Flag das nächste Mal geschaltet wird, ändert sich der HTML-Code nur in null - es scheint, dass angular den Verweis auf myArr nicht mehr erkennt.

Haben Sie irgendwelche Ideen, warum ist das passiert?

Answer 1

Das Problem besteht darin, dass Sie mehrere Vorlage-Direktiven (ngIf und ngFor) auf demselben wiederholten Element haben.

Sie können die ngIf Richtlinie über ein übergeordnetes Element bewegen:

<div *ngIf="flag"> 
    <div *ngFor="let obj of myArr.gear">{{obj | json}}</div> 
</div> 

Alternativ können Sie die Vorlagensyntax für ngIf verwenden:

<template [ngIf]="flag"> 
    <div *ngFor="let obj of myArr.gear">{{obj | json}}</div> 
</template> 

Demo Plnkr

[Bearbeiten]

In HTML gibt es keine garantierte Reihenfolge beim Aufzählen von HTML-Attributen. Nach Misko in dieser Diskussion Richtlinie Prioritäten in Angular1 mit verursacht eine Menge Probleme, und es war so absichtlich nicht in Angular2 enthalten:

https://github.com/angular/angular/issues/4792

Es gibt einen einfachen Workaround, wie Sie von meinem sehen antworte oben. Ich bezweifle, dass es jemals unterstützt wird, es sei denn, das Angular-Kernteam entscheidet sich für use their own HTML parser, um die Bestellung zu garantieren.

Dies bedeutet, dass das Verhalten nicht definiert ist, wenn mehrere Schablonendirektiven für dasselbe Element vorhanden sind. Persönlich denke ich, dass ngFor and ngIf placed on the same element should throw an exception.