object, Object 在嵌套 *ngFor 中顯示在 angular 中，帶有動態標題

Question

我想顯示一個 object 的列表，這些列表在表內的 angular 中具有動態鍵數，但它總是在 output 中顯示 [object,Object]，但我嘗試了堆棧溢出的多個選項，但沒有一個有效。 我的數據看起來像這樣。

ComparableCompaniesRatiosData = [{2008: 151260,2009: 121886,2010: 122542,2011: 198630,2012: 450840,2013: 537416,2014: 673084,ComparableParty: "CompanyName",FYE: "31-12"},{2008: 151260,2009: 121886,2010: 122542,2011: 198630,2012: 450840,2013: 537416,2014: 673084,ComparableParty: "companyName",FYE: "31-12"}]
//these table headers are dynamic
ComparablePartyHeadersTrimmed = ["ComparableParty", "FYE", "2008", "2009", "2010", "2011", "2012", "2013", "2014"]

我嘗試了以下方法來顯示列表：

1：我嘗試了經典的 for 循環。

  <tbody>    
    <ng-container *ngIf="showRatiosData">
    <tr *ngFor="let item of [].constructor(ComparableCompaniesRatiosData.length); let item = index"  data-toggle="modal">
        <td *ngFor="let value of [].constructor(ComparablePartyHeadersTrimmed.length); let i = index"  >
          <span>{{ComparableCompaniesRatiosData[item][i]}}</span>
        </td>   
      </tr>
    </ng-container>
  </tbody>

2：使用 KeyValue Pipe。

<ng-container *ngIf="showRatiosData">
  <tr  *ngFor="let row of ComparableCompaniesRatiosData" data-toggle="modal">
    <td *ngFor="let item of row | keyvalue">
      <span>{{item.value}}</span>
  </td>
  </tr>
</ng-container>

3：還有簡單的 angular *ngFor 。

<ng-container *ngIf="showRatiosData">
    <tr *ngFor="let item of ComparableCompaniesRatiosData"   data-toggle="modal">
        <td *ngFor="let row of ComparablePartyHeadersTrimmed"  >
          <span>{{item[row]}}</span>
        </td> 
      </tr>
    </ng-container>

Answer 1

好的，我添加了一個新方法 getValue()，它采用項目和屬性名稱並返回值。

  getValue(item, property): any {
    return item[property];
  }

然后在 HTML 中，首先循環遍歷數據，然后遍歷標題，並使用行和 header 名稱調用 getValue()。

<table class="table" >
    <thead>
        <tr>
            <th *ngFor="let header of ComparablePartyHeadersTrimmed" >{{header}}</th>
        </tr>
    </thead>
  <tbody>
    <tr *ngFor="let item of ComparableCompaniesRatiosData">
        <td *ngFor="let property of ComparablePartyHeadersTrimmed" >
      {{getValue(item,property)}}
    </td>
    </tr>
</tbody>
</table>

工作示例： https://stackblitz.com/edit/angular-dynamic-table-columns-example