Arrays in Angular

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

[{ 
    "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}}。任何幫助或建議將不勝感激。

來源

2017-06-22 Jim Ritchhart

什麼是'tableSampleData' ITableSampleData2的集合？你必須在Records數組上迭代（ngFor），然後在Row上......'''

'''應該可以工作 –

謝謝你的幫助。問題是，它不顯示任何東西。這是我一直以來的問題。看起來像它的代碼應該工作不起作用。沒有任何內容顯示{{dta}} –

我想你在迭代中迷路了。

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

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

來源

2017-06-22 20:23:52

感謝您的幫助。我修改了上面的代碼以指示正在打印什麼循環： /* .aa .. */ /*的.bb .. */ /* .CC .. */ 有趣的是隻/ *。 aa .. * /正在打印。這告訴我，由於某種原因，它沒有進入第二個循環。 –

回答

相關問題