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

【问题标题】：Displaying object of arrays using angular keyvalue pipe in material table在材质表中使用角度键值管显示数组对象
【发布时间】：2019-08-05 08:29:01
【问题描述】：

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

{
    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'
        },
    ]
}

现在我想从中生成 3 个材料表，一个用于NET_TIME，一个用于OVER_TIME，一个用于REMAINING。

每个表的列都相同，数据会改变。

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

只是想使用keyvalue 管道和*ngFor 实现相同的目的，以防万一NET_TIME、OVER_TIME 等属性是动态的，我的意思是不固定，我不知道会有多少。

【问题讨论】：

这里不需要keyvalue。你到底为什么要使用它？
如果我想使用 *ngFor 遍历对象，我必须使用带有 *ngFor 的 keyvalue 管道

标签： angular angular-material

【解决方案1】：

只需使用带有键值管道的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】：

你可以试试这些。您可以在这些语法中获得任何动态属性的结果

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

【讨论】：