2017-08-30 67 views
0

正嘗試通過陣列使用ngIf循環,創造primeng2表格的行和列,但它無法Angular2通過嵌套數組,迭代與ngfor

這是我都試過了。

我有一種形式的數組

  [ 
       [ 
        "category", 
        2, 
        0 
       ] 
      ], 
      [ 
       [ 
        "Jul-2017", 
        0, 
        2 
       ], 
       [ 
        "Aug-2017", 
        0, 
        2 
       ] 
      ], 
      [ 
       [ 
        "Reg-Jul-2017", 
        0, 
        0 
       ], 
       [ 
        "Rej-Jul-2017", 
        0, 
        0 
       ], 
      ....aug here in similar as jul 
     ] 

等什麼想有是

 <p-row> 
     <p-column header="category" colspan="2"></p-column> 
    </p-row> 
    <p-row> 
     <p-column header="July-2017" colspan="2"></p-column> 
     <p-column header="Aug-2017" colspan="2"></p-column> 
    </p-row> 
    <p-row> 
     <p-column header="Reg-Jul-2017"></p-column> 
     <p-column header="Rej-Jul-2017"></p-column> 
     <p-column header="Reg-Aug-2017"></p-column> 
     <p-column header="Rej-Aug-2017"></p-column> 
    </p-row> 

,所以我試圖

in my ts 
    colheaders:any[] = []; 

    onfetchdata(){ //fetch from http then from http service get res.json() 

    this._reportService.getTabularRows() 
     .subscribe(
      res=>{ 
      this.colheaders = res; 
      console.log(res)//produces above data 
      } 
     ) 

} 

在HTML我有

<p-row *ngFor="let rowval of colheaders;let idx = index"> 
    <p-column *ngFor="let newitem of rowval[idx]" [header]="newitem[0]" [rowspan]="newitem[1]" [colspan]="newitem[2]"> 

    </p-column> 
    </p-row> 

但上述不起作用。 我在哪裏錯了我的列沒有按預期呈現?

+0

什麼是實際渲染?在第二個* ngFor中需要rowval [idx],而不是rowval? – Adam

回答

0

我不想做你的工作,但你可以在此使用JSON管道調試:

<p-row *ngFor="let rowval of colheaders;let idx = index"> 
    {{rowval | json}} 
    <p-column *ngFor="let newitem of rowval[idx]" [header]="newitem[0]" [rowspan]="newitem[1]" [colspan]="newitem[2]"> 
     {{newitem | json}} 
    </p-column> 
</p-row> 

現在你可以看到什麼樣的數據是在你的循環。