Angular Material数据表中的内联编辑

Question

考虑下面的例子.是否可以使角度材料数据表具有内联编辑功能？或者使特定列下的单元格在加载时可编辑(请参阅下面的图像,其中可以编辑电子邮件列字段).如果是这样,你可以分享示例代码吗？

具有动态行的角度材料数据表

Answer 1

这实际上是 Angular Material 中的一个悬而未决的问题：表：为输入添加内联编辑。不幸的是，它目前尚未实现，但您可以在对该问题的评论中找到一些解决方案的想法。

Material Design Guide 中Data Tables > Behavior下的“内联文本编辑”部分展示了这应该是什么样子。

Answer 2

好吧，这不是干净的内联编辑，但是-我在寻找相同的东西-对于我的目的，这已经足够接近了：

https://stackblitz.com/edit/inline-edit-mat-table?file=app%2Fapp.component.html

[想法是单击单元格时弹出一个小窗口]

我的替代主意是（尽管还有更多工作要做）用Inputfields替换所有单元格并将它们绑定到正确的值，这对用户而言将具有确切的所需用例

Answer 3

在 Angular Material 11的最新版本中| 10

更新一行数据后可以调用.renderRows()方法

addRowData(row_obj){
   var d = new Date();
   this.dataSource.push({
     id:d.getTime(),
     name:row_obj.name
   });
   this.table.renderRows();
 }

 deleteRowData(row_obj){
    this.dataSource = this.dataSource.filter((value,key)=>{
      return value.id != row_obj.id;
    });
 }

源码教程链接