ngForが変更されたときにデータが失われるのはなぜですか？

Question

私は非常に興味深い問題に出くわしました。あなたがhereを見ることができるように、私が変更されたときに起こる2つの、興味深いものがある、

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

今：

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

とコンポーネントで、私はすべて1秒フラグを変更します。私は、HTML、以下の持っていますフラグ：私が最​​初にフラグを変更すると

1. 、ngForはHTMLにnullを追加し、再び呼び出されるようです。
2. 次回にフラグを切り替えると、htmlがnullに変更されます。角度がmyArrへの参照を認識しないようです。

なぜこのようなことが起こっているのですか？

Answer 1

同じ繰り返し要素に複数のテンプレートディレクティブ（ngIfとngFor）があるという問題があります。

あなたは親要素にngIfディレクティブを移動することができます。

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

Demo Plnkr

[編集]：

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

代わりに、あなたはngIfのテンプレートの構文を使用することができます

HTMLでは、HTML属性を列挙するときに順序保証はありません。 、この議論にMiskoによるとAngular1でディレクティブの優先順位は、問題の多くを引き起こし、そしてそれが故意Angular2に含まれていませんでした。

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

あなたが私から見ることができるように簡単な回避策があります上記の答え。 Angularコアチームがuse their own HTML parserに注文を保証することを決めていない限り、それはこれまでサポートされていません。

つまり、複数のテンプレートディレクティブが同じ要素に存在する場合、その動作は定義されていません。個人的には、ngFor and ngIf placed on the same element should throw an exceptionと思います。