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>

现在您可以看到循环中有哪些数据。