Angular ngIf发生变化时，为什么ngFor会丢失数据？

我遇到了一个非常有趣的问题。我有以下HTML：

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

现在，正如您所看到的，当我更改标志时，会发生两件有趣的事情：

当我第一次更改标志时，ngFor似乎再次被调用，将

null

添加到html中

下次切换标志时，html仅更改为

null

——angular似乎不再识别对

myArr

的引用

---

你知道为什么会发生这种情况吗？

问题是在同一个重复的元素上有多个模板指令（ngIf和ngFor）

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

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

{{obj|json}

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

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

{{obj|json}

[编辑]

在HTML中，枚举HTML属性时没有保证顺序。根据Misko在本次讨论中的说法，在Angular1中具有指令优先级会引起很多问题，因此故意不将其包括在Angular2中：

从我上面的回答中可以看出，有一个简单的解决方法。我怀疑，除非Angular core团队决定保证订购，否则它将永远不会得到支持

---

这意味着当同一元素上存在多个模板指令时，行为是未定义的。就我个人而言，我认为是这样。

Pixelbits，谢谢你的回答。然而，我的问题与所描述行为的起源有关。

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