Question

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

Angular Material data Table with dynamic rows

Answer 1

这实际上是Angular Material中的一个未解决的问题：Table: Add inline editing for inputs。不幸的是，它目前尚未实现，但是您可以在对该问题的评论中找到一些解决方案的想法。

《材料设计指南》 Data Tables > Behavior下的“内联文本编辑”部分显示了外观。

Answer 2

这不是干净的内联编辑，但是-我在寻找相同的东西-这对我来说足够接近：

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

[这个想法是，当您单击该单元格时会有一个小的弹出窗口]

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

Answer 3

看起来很合适：可编辑的列，分页，弹出确认并搜索可编辑的表：

作为组件：https://www.npmjs.com/package/angular-inline-editable-table

作为来源：https://github.com/RatneshChauhan/springboot-angular-crud

Answer 4

<td mat-cell *matCellDef="let row">
  <mat-form-field floatLabel="never">
    <input matInput placeholder="Topic" [value]="row.topic" [(ngModel)]="row.topic">
  </mat-form-field>
</td>

Answer 5

在最新版本的 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;
    });
 }

源教程link

Answer 6

可以使用 [(ngModel)] 来编辑字段。

这是一个代码片段：

<mat-table #table [dataSource]="dataSource">

    <!-- Name Column -->
    <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
        <mat-cell *matCellDef="let element">
            <mat-form-field floatLabel="never">
                <input matInput placeholder="Name" 
                   [value]="element.name" [(ngModel)]="element.name">
            </mat-form-field>
        </mat-cell>
    </ng-container>

这是 https://stackblitz.com/edit/angular-mat-table-inline-editing?file=app%2Ftable-editing-example.html 处的示例感谢作者，我只是为了完整性而添加这个

Answer 7

我在 Angular Material 数据表中创建了内联编辑，还带有过滤器和分页。

以下功能，我已将 FormArray 示例添加到 mat-table 中：

过滤器
转到特定页面。
在材料数据表中进行内联编辑。
添加新行。
编辑现有行。
删除该行。

<块引用>

这里有一个例子 Mat-table-inline-editing-project-Link

Answer 8

我发现内联编辑有风险，因为如果用户开始触发多行更新并且设计将由于内联字段而开始摇摆不定，您可能需要处理许多替代方案。或者，我设计了一个表格，该表格将使用抽屉一次聚焦一行，因为使用表单对话框将分离表单和表格，并且从逻辑上讲，表格应该是表格的一部分。所以，最好不要使用对话框来保存上下文。

我为此做了一个指南。 You can find the guide here.

Drawer behavior on add/edit

Edit behavior

Add behavior

Angular Material数据表中的内联编辑

8 个答案: