Блог

Я использую Angular Material mat-table и, насколько я вижу, у него есть специальное обозначение для свойств цикла *matCellDef , как показано в этой демонстрации. Чтобы удалить ненужную часть, я пытаюсь выполнять итерации записей и динамически создавать таблицу. Я попытался выполнить итерацию с помощью <div let element of elements>...</div> , но потерпел неудачу. Итак, возможно ли это с помощью специального синтаксиса?

Вот часть, которую я пытался повторить:

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

Создайте повторно используемый компонент представления matTable, подобный этому:

Мы можем видеть, что columnHeaders — это массив.

 <ng-container 
  *ngFor="let colName of columnHeaders; let i = index" 
      matColumnDef="{{ displayedColumns[i] }}"
 >
  

Значения заголовка

 <th mat-header-cell *matHeaderCellDef mat-sort-header>
  <span>
    {{ colName }}
  </span>
</th>
  

Фактические значения строк с использованием массива displayedCoumns.

 <td mat-cell *matCellDef="let row">
 <span>
   {{ row[displayedColumns[i]] }}
 </span>
</td>
  

И привязка данных

 <table
     [id]="tableId"
     matSort
     mat-table
     [(dataSource)]="dataSource"    
  >...
  

Это позволяет вводить источник данных, который представляет собой массив чего угодно, а также массив заголовков столбцов и dsiplaycolumns, подобных этому:

Чтобы повторно использовать компонент matTable, показанный выше, мы можем ввести заголовки столбцов, отображаемые столбцы и источник данных, как показано в этом коде.

 @ViewChild(ParentComponent) matTable:ParentComponent
displayedColumns = ["id", "firstName", "lastName", "updated", "actions"];
columnHeaders = ["ID", "First Name", "Last Name", "Last Updated", "Actions"];

 private setTableColumns() {
      if (this.people.length > 0) {
         this.matTable.displayedColumns = this.displayedColumns;
         this.matTable.columnHeaders = this.columnHeaders;
         this.matTable.dataSource = this.myArray;
      }
   }
  

Или как это в html, предполагая, что app-material-table является многоразовым представлением, показывающим наличие привязок, показанных выше.

 <app-material-table
   [dataSoure]="myArray"
   [columnHeaders]="columnHeaders"
   [displayedColumns]="displayedColumns"     
</app-material-table>
  

Примечание: Всякий раз, когда я вижу что-то вроде MatTable, я сразу же думаю о создании более упрощенного многоразового представления, которое абстрагирует знания об его использовании от чего-то более простого, как показано выше.