如何将角度数据表td元素从｛｛element[column]｝｝更改为输入表单字段

Question

所以，我有一个角度材料数据表，它是用json文件中的列和数据动态填充的。我现在在标准td元素中使用interpolation->{{element[column]}}填充每一行。当我单击一行时，我可以高亮显示该特定行，但我想将td从{{element[column]}}更改为form。因此，基本上我想在点击行时将这一行更改为form元素。我不知道该怎么办。

我曾尝试使用ngIf在ng模板之间进行更改，但当我单击该行时，它会更改每一行。我只想更改我特别点击的行的html元素。任何帮助或指导都将不胜感激。由于公司的限制，我实际上无法上传任何代码，但我可以使用下面的模拟代码来显示我的问题。

我有

<ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{column}} </th>
<td mat-cell *matCellDef="let element">
{{element[column]}}
</td>
</ng-container>

当我单击特定行时，我想将当前的td元素更改为具有input的form，但仅更改该特定行，而不是所有行。

Answer 1

我建议将表和内容分开。因此，定义一个表示单元格内容的新组件，点击后将转换为表单。

例如，请参见：https://stackblitz.com/edit/angular-q46mwh