Угловая 7 мат-таблица каждого ряда многоразового компонента

Question

Как каждая строка в 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-Adjusting-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-Adjusting-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>

Изучите этот пример из документации по материалам

Пример материала с реактивными формами