如何在角度 8 中使用 mat-table 动态处理 select 下拉列表？

Question

我必须向mat-table动态添加列，现在我想添加一些列行是输入字段，一些是select下拉列表，一个是所有的输出列。而且这些列名是动态的。

如何处理 Mat-Table 中的那些条件？

Link: https://stackblitz.com/edit/angular-pg9fie

Answer 1

您可以动态更改 *matRowDef="let row; columns: displayedColumns;"> 的 displayedColumns，table 将重新呈现。

只需在您的 mat-selection-list 中添加一个 formControl 让您的 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;
}

如何在角度 8 中使用 mat-table 动态处理 select 下拉列表？

How to handle select drop-down dynamically using mat-table in angular8?

angular-material

angular

angular6

mat-table