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

Question

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

Answer 1

您提到的 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 问题来查看人们提出的不同选项。

Answer 2

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

---

如果您希望它实际上与材质示例相同，您可以在其中的定位相对元素内创建一个绝对位置元素，该元素将在单击、接收和输入时提示，并在一些逻辑后关闭，以更新 formControl。

不过，您仍然需要 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>