使用 Angular 8 添加行,同时动态列添加到 Mat-Table

Rows are adding while Dynamic Columns are adding to the Mat-Table using Angular 8

将动态列添加到垫子中时 table,行与列一起添加。但是不想在添加列时将行添加到 table 中。

我有项目列表,需要 add/remove 作为列动态添加到 table。单击该项目时,该项目作为列添加到 table 中,同时添加一行。不想将行添加到 table。

如果将 5 个项目添加为列,则将 5 行添加到 table。

你可以查看问题https://stackblitz.com/edit/angular-pg9fie

看起来每次添加一列时,您都在向数据源中添加一个新行。来自您的代码:

this.selectedOptions.forEach(element => {
  this.tableDataSource.push(element.name); // this is adding a row
});

相反,您只想将该列添加到显示列的列表中。您的代码还有其他问题,所以我只是分享一个我认为您正在寻找的功能示例:

https://stackblitz.com/edit/angular-material-table-dynamic-columns?embed=1&file=app/app.html