使用Mat-table进行内联文本编辑: [英] Inline text editing with Mat-table:

问题描述

有没有人有一个很好的解决方案，可以将嵌入式文本编辑添加到一列中，您可以在其中编辑和保存并使用mat table重新编辑，如以下示例所示:

解决方案

在您的matColumnDef内部，您应该有一个< th></th> 和一个< td></td> ，只需以反应形式将输入添加到< td></td> .

---

如果您希望与示例实际相同，则可以在位置相对元素内创建一个绝对位置元素，该元素将在单击，接收和输入以及在经过某些逻辑后关闭时进行提示，以进行更新formControl.

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

示例来自github请求的链接

 < ng容器matColumnDef ="time">< mat-h​​eader-cell * matHeaderCellDef>时间</th>< td mat-cell * matCellDef =让元素；让i =索引" [formGroupName] ="i">< input type ="text" formControlName ="time"占位符="Time"></td></ng-container> 

Does anyone have a good solution to adding inline text editing to a column where you can edit and save and re-edit with mat table like in this example: https://material.io/design/components/data-tables.html#behavior it look like it's still an open issue on gitHub: https://github.com/angular/material2/issues/5982

解决方案

inside your matColumnDef you should have a <th></th> and a <td></td>, simply add input to the <td></td> with reactive forms.

---

if you wish it to be practically the same as the material example, you could create a position absolute element inside a positioned-relative element inside the that would propmt on click, receive and input, and close after some logic, to update the formControl.

Still, you'd need formControls, and to edit the matColumnDef.

example taken from the link of the github request

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

这篇关于使用Mat-table进行内联文本编辑:的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！