物料表上的动态行答案

【问题标题】：Dynamic rows on material table物料表上的动态行
【发布时间】：2020-12-09 23:54:19
【问题描述】：

我正在 Angular 中实现一个材质表，我正在努力使其动态化。到目前为止，我能够动态添加列，但尝试对行做同样的事情是行不通的。

addColumn() 函数无需刷新任何内容即可动态添加列。

addColumn() {
   this.columns.push(this.formInput.value);
}

如果不“刷新”表格，即隐藏它然后使用切换重新显示它，尝试对 row 执行相同操作不会做出任何更改。

addRow() {
   this.rowsData.push(this.otherFormInput.value);
}

<mat-table [dataSource]="rowsData">
   <ng-container *ngFor="let column of columns" [matColumnDef]="column">
      <mat-header-cell *matHeaderCellDef> {{ column }} </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{ element[column] }} </mat-cell>
   </ng-container>

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

有没有办法解决这个问题？任何帮助将不胜感激。

【问题讨论】：

标签： angular angular-material angular-material-table

【解决方案1】：

您的变量rowsData 是表的dataSource，因此如果您将数据推送到此dataSource，它将不起作用。

你应该这样做：

addRow() {
   this.rowsData.data.push(this.otherFormInput.value);
}

【讨论】：

【解决方案2】：

我想在Tushar 的答案中再添加一行。

你应该这样做：

addRow() {
   this.rowsData.data.push(this.otherFormInput.value);
   // add this line also.
   this.dataSource.filter = "";
}

【讨论】：