Angular Material 数据表中的内联编辑答案

【问题标题】：Inline editing in the Angular Material data tableAngular Material 数据表中的内联编辑
【发布时间】：2018-09-22 01:59:00
【问题描述】：

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

Angular Material data Table with dynamic rows

【问题讨论】：

标签： angular datatable angular-material-5

【解决方案1】：

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

Material Design Guide 中Data Tables > Behavior 下的“内联文本编辑”部分显示了它的外观。

【讨论】：

对此有什么解决方案吗？

【解决方案2】：

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

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

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

我的替代想法是（尽管需要更多工作）用输入字段替换所有单元格并将它们绑定到正确的值，这对于用户来说将具有确切期望的用例

【讨论】：

【解决方案3】：

<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>

【讨论】：

请编辑您的答案以解释您在此处所做的事情，以及为什么这种方法可能比前五个答案更可取。这是否依赖于优于原始旧答案的新语法？这是否解决了这些答案中的限制？这将有助于未来的读者更好地理解为什么他们应该考虑这个建议。

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

这是一个代码sn-p：

<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 的示例感谢作者，我只是为了完整性而添加这个

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review
@Nick 好的。你现在可以去掉负数了:)

【解决方案6】：

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

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

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

这是Mat-table-inline-editing-project-Link的一个示例

【讨论】：

【解决方案7】：

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

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

Drawer behavior on add/edit

Edit behavior

Add behavior

【讨论】：

请记住，过度的自我推销可能会被视为 SO 上的垃圾邮件

【解决方案8】：

我认为最简单直接的解决方案是：

在您的 ts 文件中，您只需创建一个变量，比如“showInputComments = true”

    <ng-container matColumnDef="comments">
      <th mat-header-cell *matHeaderCellDef>COMMENTS</th>
      <td mat-cell *matCellDef="let element">
       <!-- don't show your value in a string -->
        <ng-container *ngIf="!showInputComments ">
          {{element.comments}}
        </ng-container>

        <!-- show your value in a input-->
        <div *ngIf="showInputComments ">
          <input [value]="element.comments" />
        </div>
      </td>
    </ng-container>

你的输入样式

【讨论】：