объект, отображение объекта во вложенном * ngFor в angular с динамическими c заголовками - PullRequest
Новая
       14

объект, отображение объекта во вложенном * ngFor в angular с динамическими c заголовками

0 голосов
/ 17 апреля 2020

Я хочу отобразить список объектов с динамическим c количеством ключей в angular внутри таблицы, но он всегда показывает [объект, объект] в выводе, я пробовал несколько вариантов из переполнения стека, но никто из них не работал. Мои данные выглядят так. 

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: я пытался с classi c для l oop. 

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

1 Ответ

1 голос
/ 17 апреля 2020

Хорошо, я добавил новый метод getValue (), который берет имя элемента и свойства и возвращает значение. 

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

Затем в HTML сначала l oop через данные, затем через заголовки и вызовите 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

...