使用* ngFor使用/ Angular Material生成列

Question

我正在使用一个从组件中获取数据的教程。

在这里，我必须自己插入每一列，而不是像页面底部的示例那样生成它们。

<div>
  <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">

    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Id </th>
      <td mat-cell *matCellDef="let user"> {{user.id}} </td>
    </ng-container>

    <ng-container matColumnDef="firstName">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
      <td mat-cell *matCellDef="let user"> {{user.firstName}} </td>
    </ng-container>

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

这里我没有使用Material，我从字符串[]生成每一列：

getColumns(): string[] {
  return ['id', 'firstName', 'lastName', 'age'];
}//this is in my service

因此，如果我删除或修改我的服务中的列，它将在表中删除。

<table>
<tr>
  <th *ngFor="let col of columns" >{{col}}
  </th>
</tr>
<tr *ngFor="let user of users">
  <td *ngFor="let col of columns">{{user[col]}}</td>
</tr>
</table>
<div>
</div>

如何在ng-container，th和td中应用相同的方法？

Answer 1

你可以这样使用。

 <table class="table table-bordered table-info">
                                <thead class="bg-primary text-white">
                                    <tr>
                                        <th>Product</th>
                                        <th>Qty</th>
                                        <th>Amount</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr *ngFor='let kotitems of cartitems'>
                                        <td>{{kotitems.Product}}</td>
                                        <td>{{kotitems.Qty}}</td>
                                        <td>{{kotitems.Amt}}</td>
                                    </tr>
                                </tbody>
                                <tfoot class="bg-primary text-white">
                                    <tr>
                                        <td>Total</td>
                                        <td colspan="2" style="text-align: center;">{{getSum()}}</td>
                                    </tr>
                                </tfoot>
                            </table>