Таблица материалов не получает пример для динамического заголовка строки и столбца

Question

В моем текущем сценарии, где я хочу, чтобы строка в качестве заголовка и столбца была динамической c значение, которое я должен указать в таблице материалов ниже, является примером

                  Department       Deparment1
Name              Jack             Vimal
Location          Chennai          Lucknow

Но то же самое я смог выдаст нормальный html с angular, но проблема в том, что я не смог уничтожить текущую таблицу, когда выполняю какое-либо действие на странице.

Нормальный HTML таблица

     <table>
        <th *ngFor="let column of columnsToDisplay; let i=index" (click)="assumptionModel(i)">{{column}}</th>
        <tr>
          <td *ngFor="let dat of trialMilestones">{{dat.name}}</td>
        </tr>
        <tr>
          <td *ngFor="let dat of trialMilestones">{{dat.location}}</td>
        </tr>
    </table>

Пожалуйста, дайте мне знать, как это сделать, есть ли какой-нибудь возможный способ сделать это серьезно изо всех сил

Answer 1

В типичной таблице материалов у вас есть

1. dataSource, данные
2. displayColumns, массив строк с именами столбцов
3. columnsDef, массив объектов типа {title: 'header', name: 'field'}

Обратите внимание, что отображаемые столбцы связаны с columnsDef

displayedColumns=columsDef.map(x=>x.name)

Итак:

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    <ng-container *ngFor="let column of columnsDef" [matColumnDef]="column.name">
        <th mat-header-cell *matHeaderCellDef>{{column.title}}</th>
        <td mat-cell *matCellDef="let element">
            {{element[column.name]}}
        </td>
    </ng-container>

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

Теперь вы меняете отображаемые столбцы и столбцы по умолчанию. Ну, в этот stackblitz я использую вспомогательную переменную "columnDefAll со всеми возможными столбцами и множественный выбор с [ngModel] = displayColumns и использую (ngModelChange) для фильтрации столбцов (displayColumns будет фильтроваться как dolumnsDefAll), но Вы можете сделать по-другому

<mat-form-field>
    <mat-label>Columns</mat-label>
    <mat-select multiple [ngModel]="displayedColumns"
              (ngModelChange)="displayedColumns=$event;changeColumns($event)" >
        <mat-option *ngFor="let col of columnsDefAll" [value]="col.name">
            {{col.title}}
        </mat-option>
    </mat-select>
</mat-form-field>

  changeColumns(columns)
  {
    this.columnsDef=this.columnsDefAll.filter(x=>columns.indexOf(x.name)>=0)
  }