Question

我有一个来自响应的对象，看起来像

Layout=Grid and ColumnCount=1

现在我要从中生成3个物料表，一个用于{ NET_TIME: [ { createdBy: 'Alex', from: '9.0', to: '8.0' }, { createdBy: 'Bob', from: '3.75', to: '4.03' }, { createdBy: 'Carl', from: '5.13', to: '4.90' } ], OVER_TIME: [ { createdBy: 'Jeffry', from: '0.3', to: '0.6' }, { createdBy: 'Sam', from: '3.25', to: '4.01' }, ], REMAINING: [ { createdBy: 'Ron', from: '1.3', to: '1.5' }, { createdBy: 'Alex', from: '9.8', to: '9.4' }, { createdBy: 'John', from: '2.4', to: '2.6' }, { createdBy: 'Paul', from: '3.4', to: '4.6' }, ] }，一个用于NET_TIME，一个用于OVER_TIME。

每个表的列均相同，数据将更改。

我知道如何通过将响应放入组件中，通过对象键及其值分离，定义3个表并为其赋值来实现相同的目的。

只是想使用REMAINING的{{1}}管道实现相同的功能，以防万一keyvalue，*ngFor之类的属性是动态的，我的意思是不固定，我不这样做不知道会来多少。

Answer 1

您可以尝试这些。您可以使用这些语法获取任何动态属性的结果

<div *ngFor="let p of objectName | keyvalue">
  <div *ngFor="let q of p.value | keyvalue">
    <div *ngFor="let r of q.value | keyvalue">
        {{r.key}} {{r.value}}
    </div>
  </div>
</div>

Answer 2

只需在键值管道中使用ngFor即可获取每个键的数据数组

<ng-container *ngFor="let tableData of dataSource | keyvalue">
 {{ tableData.key }} , {{tableData.value | json }} ?

</ng-container>

现在我们将为dataSource使用值

<ng-container *ngFor="let tableData of dataSource | keyvalue">
    <h4>
        <label for="">{{tableData.key }}</label>
</h4>
<table mat-table [dataSource]="tableData.value" class="mat-elevation-z8">

  <ng-container matColumnDef="createdBy">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.createdBy}} </td>
  </ng-container>

 <ng-container matColumnDef="from">
    <th mat-header-cell *matHeaderCellDef> from </th>
    <td mat-cell *matCellDef="let element"> {{element.from}} </td>
  </ng-container>

  <ng-container matColumnDef="to">
    <th mat-header-cell *matHeaderCellDef> to </th>
    <td mat-cell *matCellDef="let element"> {{element.to}} </td>
  </ng-container>


  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

<br>

</ng-container>

demo ??

在材质表中使用角度键值管道显示数组的对象

2 个答案: