对象，对象显示在嵌套的 *ngFor 中，带有动态标题答案

【问题标题】：object, Object displaying in nested *ngFor in angular with dynamic headers对象，对象显示在嵌套的 *ngFor 中，带有动态标题
【发布时间】：2020-04-17 17:39:00
【问题描述】：

我想显示一个对象列表，这些对象在表格中具有动态的 Angular 键数，但它总是在输出中显示 [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 管道。

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

【问题讨论】：

标签： javascript angular ngfor

【解决方案1】：

好的，我添加了一个新方法 getValue()，它获取项目和属性名称并返回值。

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

然后在 HTML 中，首先循环遍历数据，然后遍历标题，并使用行和标题名称调用 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

【讨论】：