ngIf如何改變，爲什麼ngFor丟失數據？

Question

我遇到過非常有趣的問題。我有以下HTML：

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

而在分量，我改旗每1秒：

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

現在，你可以看到here，有兩個當我改變了這種情況發生有趣的事情標誌：

1. 當我第一次改變標誌，ngFor似乎再次被調用，加入null到html。
2. 當下一次切換標誌時，html僅更改爲null - 似乎角度不再承認對myArr的引用了。

你有什麼想法，爲什麼會發生這種情況？

Answer 1

問題是，您在同一個重複元素上有多個模板指令（ngIf和ngFor）。

您可以在父元素上移動ngIf指令：

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

或者，您也可以使用ngIf的模板語法：

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

Demo Plnkr

[編輯]

在HTML中，枚舉HTML屬性時不保證排序。根據MISKO在這次討論中，Angular1有指令的優先級造成了很大的問題，所以它是故意不包含在Angular2：

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

有一個簡單的工作環境，你可以看到我的上面的答案。我懷疑，它會永遠支持，除非角核心團隊決定use their own HTML parser保證排序。

這意味着當同一元素上存在多個模板指令時，行爲是未定義的。我個人認爲ngFor and ngIf placed on the same element should throw an exception。