Как обработать выпадающий список динамически, используя mat-table в angular8?

Question

Мне нужно динамически добавлять столбцы в таблицу mat, теперь я хочу добавить некоторые строки столбцов, являющиеся полями ввода, некоторые - раскрывающийся список выбора, а один - вывод всех столбцов. И эти имена столбцов являются динамическими.

Как обрабатывать эти условия в Mat-Table?

Ссылка: https://stackblitz.com/edit/angular-pg9fie

Answer 1

Вы можете динамически изменить displayedColumns из *matRowDef="let row; columns: displayedColumns;">, и таблица будет перерисована.

Просто добавьте formControl к вашему mat-selection-list, чтобы сделать его displayedColumns его значением.

<mat-selection-list [formControl]="columnFormControl">
  <mat-list-option *ngFor="let column of ruleGroupColumns" [value]="column"></mat-list-option>
</mat-selection-list>

ruleGroupColumns: string[] = [
  'MERGE',
  'FACILITY',
  'COMPANY'
];

columnFormControl = new FormControl(this.ruleGroupColumns);

get displayColumns() {
  return this.columnFormControl.value;
}