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>

但是上述方法不起作用。 我在哪里出錯，因為我的列arent無法按預期呈現？

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>

現在，您可以查看循環中的數據。