title: AngularJS2: NgFor template inside Template is not working correctly
body: <p><strong><em>UPDATE</em>: This a bug in Angular &lt;=2.4.1. See my "proof" posting below.</strong> </p>
  
  <p>I have a problem with AngularJS (2.2) with For loop templates inside templates to display an array inside an array.  </p>
  
  <p>See the MWE below. The first picture shows the start situation, If you press the button once, I get the desired output, however if I press the button again I get strange output (FIELD: 2 SUBFIELD: 2 expected)</p>
  
  <p><strong>It seems that the for loop does not work correctly anymore once initialized. How can I fix this?</strong> </p>
  
  <p>If I remove the inner-For template, I get the desired output for only FIELD again.  </p>
  
  <p><a href="https://i.stack.imgur.com/Kpa36.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Kpa36.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/czXZH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/czXZH.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/d0JVf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/d0JVf.png" alt="enter image description here"></a></p>
  
  <p><strong>MWE</strong></p>
  
  <pre><code>import {Component} from '@angular/core';  
  import {Button,DataList} from 'primeng/primeng';
  
  @Component({
      selector: 'my-app', 
      template: `&lt;button (click)="refreshData(dlist)"&gt;Press Me&lt;/button&gt;
          &lt;p-dataList #dlist  [value]="dataItems" [paginator]="true" [rows]="20" [lazy]="true" (onLazyLoad)="loadData($event)" [totalRecords]="totalRecords"&gt; 
        &lt;header&gt;Run {{run}}&lt;/header&gt;
        &lt;template let-dataItem&gt; 
          FIELD: {{dataItem.field}}
          &lt;template ngFor let-n [ngForOf]="dataItem.array"&gt;  
              SUBFIELD: {{n.item}}
          &lt;/template&gt;
        &lt;/template&gt;
      &lt;/p-dataList&gt;`
  })
  
  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 = &lt;DataItem[]&gt; 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;
  }
  </code></pre>