AngularJS2: шаблон NgFor внутри Шаблон не работает правильно

Question

ОБНОВЛЕНИЕ: Это ошибка в Угловом < = 2.4.1. См. Мою статью «доказательство» ниже.

У меня проблема с AngularJS (2.2) с шаблонами цикла для внутри шаблонов для отображения массива внутри массива.

См. Ниже MWE. На первом снимке показана начальная ситуация. Если вы нажмете кнопку один раз, я получу желаемый результат, однако, если я снова нажму кнопку, я получаю странный вывод (FIELD: 2 SUBFIELD: 2 ожидается)

Кажется, что for loop не работает правильно после инициализации. Как я могу это исправить?

Если я удаляю шаблон inner-For, я снова получаю желаемый результат только для FIELD.

MWE

import {Component} from '@angular/core'; 
import {Button,DataList} from 'primeng/primeng'; 

@Component({ 
    selector: 'my-app', 
    template: `<button (click)="refreshData(dlist)">Press Me</button> 
     <p-dataList #dlist [value]="dataItems" [paginator]="true" [rows]="20" [lazy]="true" (onLazyLoad)="loadData($event)" [totalRecords]="totalRecords"> 
     <header>Run {{run}}</header> 
     <template let-dataItem> 
     FIELD: {{dataItem.field}} 
     <template ngFor let-n [ngForOf]="dataItem.array"> 
      SUBFIELD: {{n.item}} 
     </template> 
     </template> 
    </p-dataList>` 
}) 

export class AppComponent { 
    dataItems : DataItem[]; 
    totalRecords : number; 
    run : number; 

    constructor() { 
     this.run = 0; 
    } 
    loadData(event : any) { 
    } 
    refreshData(dtree : any) { 
     this.run++; 
     var json = "{ \"data\": [{\"field\": \""+this.run+"\", \"array\" : [{ \"item\": \""+this.run+"\"}]}]}"; 
     console.log(json); 
     this.dataItems = <DataItem[]> JSON.parse(json).data; 
     // force paginator back to first page. 
     dtree.paginate({ first: 0 , rows: dtree.rows}); 
    } 
} 

export interface DataItem { 
    array : MyValue[]; 
    field: String; 
} 

export interface MyValue { 
    item : String; 
} 

Answer 1

Как насчет:

<template *ngFor="let item of dataItem.array"> 
     SUBFIELD: {{item.item}} 
</template> 

Answer 2

Я нашел причину. Это ошибка в AngularJS < = 2.4.1. Это Plunker snippet демонстрирует проблему. Нажмите несколько раз на кнопку, чтобы увидеть эффект.

При копировании/вилка сниппет и изменить Angualar версию в этом Plunker фрагменте кода путем изменения systemjs.config.js:

var V = '2.4.1';

в

var V = '2.4.2';

Вы видите, что нажав несколько раз на кнопка теперь дает желаемый эффект без каких-либо изменений.

Тем не менее, я не смог найти в журнале углового изменения 2 связанную с этим ошибку. Однако есть некоторые исправления, связанные с шаблонами/ngFor.