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 
     ] 

SOものを持ってしようとしています、私は

を持っているので、私はHTMLで

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 
      } 
     ) 

} 

を試してみました

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

です

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

今、あなたはあなたのループであるどのようなデータを見ることができます。