为什么ng在ngIf发生变化时会丢失数据？

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

从上面的答案可以看出，有一种简单的解决方法。我怀疑，除非Angular核心团队决定use their own HTML parser保证订购，否则它将得到支持。

这意味着当同一元素上存在多个模板指令时，行为未定义。就个人而言，我认为ngFor and ngIf placed on the same element should throw an exception。