Почему ngFor теряет данные при изменении 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. Согласно Мисько в этом обсуждении, имеющие приоритеты директивы в Angular1 вызвало много вопросов, и поэтому он был намеренно не включены в Angular2:

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

Существует простой работы вокруг, как вы можете видеть из моего ответьте выше. Я сомневаюсь, что это будет поддерживаться, если команда Angular Core не решит use their own HTML parser, чтобы гарантировать заказ.

Это означает, что при наличии нескольких директив шаблонов в одном элементе поведение не определено. Лично я считаю, что ngFor and ngIf placed on the same element should throw an exception.