如何在Angular2中動態顯示鍵的值？

Question

我收到這樣的JSON響應：-

{
  "status": 1,
  "message": "Data found",
  "list": [
    {
      "id": "1",
      "title": "First Data"
    },
    {
      "id": "2",
      "title": "Second Data"
    }
  ],
  "total": 3,
  "current_page": "1",
  "error": 0
}

在組件文件中，我像這樣存儲list obj：

viewPage(page,per_page){  
  this._adminPage.fetchAdminPageData(page, per_page).subscribe(
      data => {
            this.list = data.list;
            this.total_item = data.total;
            this.current_page = data.current_page;
            this.arrayOfKeys = Object.keys(this.list[0]);
          },
      err => {
            console.log(err)
          },
      () => {}
    ); 
  this.status = true;       
}

使用this.arrayOfKeys = Object.keys(this.list[0]); 我正在獲得list的鑰匙。

在模板頁面中，我正在編寫以下代碼：-

<thead>
  <tr>
     <th *ngFor='let key of arrayOfKeys'>{{key}}</th>
  </tr>
</thead>

這將在表標題中顯示id和title 。 我這樣做是為了使整個表動態化。

現在，我希望通過循環遍歷每個對象來列出每一行的值。

所以我想寫這樣的東西：

<table class="table table-striped table-bordered responsive">
   <thead>
      <tr>
        <th *ngFor='let key of arrayOfKeys'>{{key}}</th>
      </tr>
   </thead>
   <tbody>
      <tr *ngFor='let items of list'>
        <td *ngFor='let key1 of arrayOfKeys'>[value of that key of that row]</td>
      </tr>
   </tbody>
</table>

{{items.id}}會顯示id的值，例如1、2。我想要類似{{items.{{key1}}來顯示每個鍵的值，例如1或First Data 。 我怎樣才能做到這一點？

Answer 1

您需要使用[]表示法。

<tr *ngFor='let items of list'>
   <td *ngFor='let key1 of arrayOfKeys'>{{ items[key1] }}</td>
</tr>