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

Question

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

Answer 1

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

如果您希望它与 material 示例几乎相同，您可以在内的相对定位元素内创建一个位置绝对元素，该元素将在点击、接收和输入以及关闭时提示经过一些逻辑，更新 formControl。

仍然，您需要 formControls，并编辑 matColumnDef。

示例取自 github 请求的 link

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

Answer 2

您提到的 git 集线器问题有一些人们提出的实现。

你可以从中得到启发：

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 问题来了解人们提出的不同选择。

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

Inline text editing with Mat-table:

inline

angular

mat-table