我如何在Typescript/ Angular表中的数据绑定中传递值

Question

主要目标:基于JSON数据生成一个表

<mat-table class="mat-elevation-z8" *ngIf="carrierRates" [dataSource]="carrierRates">
<ng-container *ngFor="let columnName of columnsList" matColumnDef="{{columnName}}">
<mat-header-cell *matHeaderCellDef>{{columnName}}</mat-header-cell>
<mat-cell *matCellDef="let itemRate">
{{itemRate.$columnName}}
</mat-cell>
<mat-footer-cell *matFooterCellDef></mat-footer-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="columnsList;"></mat-header-row>
<mat-row *matRowDef="let row; columns: columnsList;"></mat-row>
<mat-footer-row *matFooterRowDef="columnsList;"></mat-footer-row>
</mat-table>

问题1:我将如何运行两个for循环一个读取列列表，另一个读取数据源?

问题2:如何在这行中传递columnName值{{itemRate.$columnName}}

供参考:columnName是JSON数据的KEY列表

{"planId":"abcd",
"rateAreaId":"lmpo",
"singleMonthly":0,
"twoPeopleMonthly":0,
"familyMonthly":0}

Answer 1

1. 你不需要执行2遍循环，但你应该只定义列和行模板。

每个列定义都应该有一个唯一的名称，并包含其标题和行单元格的内容。下面是一个名称为planId的简单列定义。标题单元格包含文本">计划ID"每个行单元格将呈现每行数据的planId属性。

<ng-container matColumnDef="planId">
<th mat-header-cell *matHeaderCellDef> Plan ID</th>
<td mat-cell *matCellDef="let itemRate"> {{itemRate.planId}} </td>
</ng-container>

，依此类推。

2. 您的列名是planId,rateAreaId,singleMonthly,twoPeopleMonthly,familyMonthly。这意味着您应该在组件文件中创建一个变量columnList，其中包含您想要呈现的列列表，如下所示:

columnList = [planId, rateAreaId, singleMonthly, twoPeopleMonthly, familyMonthly];

然后，像您所做的那样，将mat-header-row和mat-row添加到mat-table的内容中，并提供columnList作为输入。

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

注意提供给行的列列表可以是任何顺序，不一定是您编写列定义的顺序。此外，您不必包含模板中定义的每个列。

这意味着通过更改提供给行的列列表，您可以轻松地重新排序并动态地包括/排除列。

无论如何，我只是复制了角材料表的综合文档的一部分;)