Angular2通过嵌套数组，迭代与ngfor

Question

正尝试通过阵列使用ngIf循环，创造primeng2表格的行和列，但它无法

这是我都试过了。

我有一种形式的数组

  [ 
       [ 
        "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> 

但上述不起作用。 我在哪里错了我的列没有按预期呈现？

Answer 1

我不想做你的工作，但你可以在此使用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> 

现在你可以看到什么样的数据是在你的循环。