Question

mat-table中的每一行如何成为可重用组件？

在常规html表中，我使用这种方法

<table class="table table-hover table-bordered">
    <thead>
        <tr>
            <th class="text-left width-50" ></th>
            <th class="text-left width-85">Id</th>
            <th class="text-left">Price</th>
            <th class="text-left width-160">City</th>
            <th class="text-left width-160">State</th>
            <th class="text-left width-160">Qty</th>
            <th class="text-left width-160">Action</th>
        </tr>
    </thead> 
    <tbody>
      <tr pdp-adjustment-list-item *ngFor="let currentItem of pagedResponse?.content"  
         (idCheckedOutput)="addItemIdToCheckedArray($event)"
         [item]="currentItem" >
      </tr>
    </tbody>
</table>

pdp-adjustment-list-item是AdjustmentListItemComponent的选择器。这很方便，因为每一行都是具有反应形式的AdjustmentListItemComponent的一个相同实例，并且我在循环中将一个@Input（）项传递给对象。

这是干净直观的。

现在，在Angular7材质表示例中，我可以发现所有内容都放在一个uber组件中。

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="position">
  <th mat-header-cell *matHeaderCellDef> No. </th>
  <td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>

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

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

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

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

如果这是真的，并且您实际上必须将所有内容都保留在一个uber组件中，那么在谈论可重用性时，这不仅是糟糕的设计选择，而且必须将所有内容都保留在一个组件中会造成大量的意大利面条式代码。

因此，解决该问题的方法是为uber组件中的每一行动态创建一个反应式表单，然后利用表单数组，但这有什么用呢？实际上，我这样做并决定删除它，因为代码将完全无法维护。

Answer 1

听起来像pdp-adjustment-list-item就像

<td *ngFor="let ....

但是这里完全一样，您定义列，并根据“数据源”动态生成行。

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

您甚至可以使列定义动态生成

<ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
            <mat-cell *matCellDef="let element" >
                        {{ element[column] }}
            </mat-cell>
        </ng-container>

Inspect this example from the material docs

Example of material with reactive forms

Angular 7 mat-table每行可重用组件

1 个答案: