Angular 角度7垫表每行可重复使用组件

mat表中的每一行如何成为可重用组件

在常规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调整列表项是调整列表项组件的选择器。 这很方便，因为每一行都是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>

不
{{element.position}
名称
{{element.name}
重量
{{element.weight}}
象征
{{element.symbol}

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

---

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

听起来像pdp调整列表项

<td *ngFor="let ....

---

如何使用这种方法实现“每行一个被动表单”？当我需要每一行都带有一定的逻辑性时，这对我有什么帮助？我对简单地显示数据没有任何问题。
rows:FormArray=this.fb.array（[]）；form:FormGroup=this.fb.group（{'streams'：this.rows，}）行，您将为每行创建一个formGoup，并且您可以通过索引访问它们<代码>
这实际上非常好。比我最初写的要简单得多。thnks
<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>