在新行可编辑的同时，让现有的行成为只读的Angular FormArray。

Question

我目前有一个方案如下。

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

从服务器返回的数据显示在表中，并且应该始终是只读的。然而，我希望能够添加一个新的行，它应该是可编辑的，例如，包含输入字段和下拉菜单。

下面是 是一个Stackblitz的例子，我可以添加一个新的行，但它也是只读的。 我想让新添加的行包含可编辑的输入控件。

这可能吗？

Answer 1

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

你可以把editiable属性添加到一个新的用户对象中 然后在你的td渲染中你必须查看是否是可编辑的. 伪代码:

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

或者你可以在你的组件中加入一个ediditableIndex。伪代码：或者你可以在你的组件中设置一个editableIndex，-1则没有任何东西是可编辑的，否则就是可编辑行的索引。

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

在模板中，你可以让你的输入只读（或禁用选择），而不是两个td。

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