使用 Mat-table 进行内联文本编辑：答案

【问题标题】：Inline text editing with Mat-table:使用 Mat-table 进行内联文本编辑：
【发布时间】：2019-08-11 13:27:10
【问题描述】：

有没有人有一个很好的解决方案来将内联文本编辑添加到可以编辑、保存和重新编辑的列中，如下例所示： https://material.io/design/components/data-tables.html#behavior 看起来它仍然是 gitHub 上的一个未解决问题：https://github.com/angular/material2/issues/5982

【问题讨论】：

标签： angular inline mat-table

【解决方案1】：

在您的 matColumnDef 中，您应该有一个 <th></th> 和一个 <td></td>，只需使用反应形式将输入添加到 <td></td>。

如果您希望它与材料示例几乎相同，您可以在内部的定位相对元素内创建一个绝对位置元素，该元素将在点击、接收和输入时提示，并在一些逻辑后关闭，以更新表单控件。

仍然需要 formControls，并编辑 matColumnDef。

来自github请求链接的示例

      <ng-container matColumnDef="time">
        <th mat-header-cell *matHeaderCellDef> time </th>
        <td mat-cell *matCellDef="let element; let i = index" [formGroupName]="i"> 
            <input type="text" formControlName="time" placeholder="Time"> 
        </td>
      </ng-container>

【讨论】：

对不起，我有点笼统。我明白了那部分，但你如何使它可编辑和可保存。就像您在编辑输入显示时一样，但当您完成时它只显示评论
您可以添加 (keydown.enter)="onUpdate()" 以在输入时更新...或者添加 (keyup) 如果您想在键入时进行编辑，或者 (blur) 以在失去焦点时进行编辑，或者 (更改）以编辑输入更改...等...试试这个并告诉我它是否有效！编辑： onUpdate() 应该调用formControl.setValue() 并且它应该直接从DOM 或formcontrol 获取输入。无论哪种方式都很好
谢谢，我会尝试一下。你有像 stackblitz 这样的工作示例吗？
遗憾的是，我的工作示例是在与工作相关的项目上，我手头没有，也无法公开分享（不过我只会分享重要的部分）...
这是工作示例medium.com/@nsrathore/…

【解决方案2】：

你提到的 git hub 问题有一些人们提出的实现。

你可以从中得到灵感：

https://stackblitz.com/edit/material2-beta12-es19ub?file=app%2Fapp.component.html

或者这个： https://stackblitz.com/edit/angular-g5u7cy?file=app%2Ftable-editing-example.html

我会通过 github 问题查看人们提出的不同选项。

【讨论】：