将现有行设为只读，而新行可编辑 Angular FormArray

Question

我目前的场景如下：

我有一个 html table，绑定到 Reactive Form's FormArray。

从服务器返回的数据显示在 table 中，并且应该始终是只读的。但是，我希望能够添加一个新行，例如应该是 editable，包含输入字段和下拉列表。

Here 是一个 Stackblitz 示例，我可以在其中添加新行，但它也是只读的。我想添加新行，以包含 editable 输入控件。

这可能吗？

Answer 1

有很多方法可以做到这一点：

您可以将可编辑的属性添加到新的用户对象，并且在您的 td 渲染中您必须查看是否可编辑。伪代码：

<td *ngIf="!user.editable">{{user.name}}</td>
<td *ngIf="user.editable"><input matInput ... ></td>

或者您可以在您的组件中有一个 editableIndex。 -1 没有什么是可编辑的，否则是可编辑行的索引。

<td *ngIf="editableIndex!==i">{{user.name}}</td>
<td *ngIf="editableIndex===i"><input matInput ... ></td>

您可以将输入设置为只读（或禁用选择），而不是模板中的两个 tds：

<td><input [readonly]="editableIndex!==i" matInput ... ></td>

Make an existing row readonly while new row is editable Angular FormArray