angular - Angular Material 数据表中的内联编辑

Question

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

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

score 10 · Accepted Answer

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

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

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

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

score 6 · Accepted Answer

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

Material Design Guide 中Data Tables > Behavior下的“inline text editing”部分显示了它的外观。

score 1 · Accepted Answer

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

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

筛选
转到特定页面。
材料数据表中的内联编辑。
添加一个新行。
编辑现有行。
删除行。

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

score 1 · Accepted Answer

在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;
    });
 }

源码教程链接

score 0 · Accepted Answer

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

我也为此做了一个指南。你可以在这里找到指南。

添加/编辑时的抽屉行为

编辑行为

添加行为

score 0 · Accepted Answer

可以使用 [(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的一个示例感谢作者，我只是为了完整性添加这个

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

在您的 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>

你设计你的输入

angular - Angular Material 数据表中的内联编辑

8 回答 8

Related

Reference