Arrays in Angular

Question

我試圖在Angular頁面中顯示存儲在文件中的數據示例列表。這是爲數據字典應用程序。這意味着我不會提前知道字段名稱，因爲它可能是任何文件和任意數量的列。我的JSON看起來像這樣（儘管如果需要調整，我很靈活）。

[{ 
    "FileName": "QUOTHDR", 
    "Records": [{ 
      "Row": [ 
       " 7", " 1", " ", " 15", " 71", " ", " 6617", " 1", " 1", " ", " ", " R-2017-0063674", " 2017-06-15-08.58.44.817197", " .0000", " ", " 60007", " ORIGIN (1)", " ", " ", " 174", " ", " 141741", " 1", " ", "2017-06-15-09.23.14.831709", " 6617", " ", " ", " 2017-06-15-09.34.09.200973" 
      ] 
     }, 
     { 
      "Row": [ 
       " 7", " 1", " ", " 15", " 71", " ", " 6617", " 1", " 1", " ", " ", " R-2017-0063674", " 2017-06-15-08.58.44.817197", " .0000", " ", " 60007", " ORIGIN (1)", " ", " ", " 174", " ", " 141741", " 1", " ", "2017-06-15-09.23.14.831709", " 6617", " ", " ", " 2017-06-15-09.34.09.200973" 
      ] 
     } 
    ] 
}] 

我在服務實現這一點：

export interface ITableSampleData2 { 
    fileName: string; 
    Records: any[] ; 
    } 

And my HTML iterates the Records array and the Row Array like: 
      <tbody> 
       <div *ngFor="let tsd of tableSampleData"> 

       <tr *ngFor="let row of tsd.Row;">       

        <td *ngFor="let dta of row; let i = index"> 
         {{dta[i]}} 
        </td> 

       </tr> 
       </div> 
      </tbody> 

...我已經尋找了大量的實例，採用NG-重複，*用[] ngFor。似乎沒有任何工作。我認爲我很接近，但我沒有得到任何東西出來或控制檯日誌中的錯誤。我也嘗試過{{i}}。任何幫助或建議將不勝感激。

Answer 1

我想你在迭代中迷路了。

它應該是這樣的，如果你這樣做了「正確的方式」：

/* I removed the <div> inside the <tbody>, just to clarify :) */ 
<tbody *ngFor="let tsd of tableSampleData"> 
    /* ... */ 
    <tr *ngFor="let record of tsd.Records;"> 
     <td *ngFor="let dta of record.Row; let i = index"> 
      /* ... */ 
     </td> 
    </tr> 
</tbody>