Javascript 输入字段上的角度条件只读/禁用

我有一个带有输入字段的表，我正在用模型值填充这些字段，我想对这些填充的字段应用只读/禁用。当我单击AddRow时，我将空行添加到表中。添加到表中的空行必须是可编辑的。我找不到只对已填充的表单元格应用只读/禁用的逻辑

    <td> <input class="form-control" type="text" id="userListImage" [(ngModel)]="userList[$index].image"
        name="userListImage{{$index}}"  [disabled]="data.readonly"/>
    </td>
    <td> <input class="form-control" type="text" id="userListKeywords" [(ngModel)]="userList[$index].keywords"
        name="userListKeywords{{$index}}" [disabled]="data.readonly"/></td>
  </tr>
 </tbody>

HTML

    <td> <input class="form-control" type="text" id="userListImage" [(ngModel)]="userList[$index].image"
        name="userListImage{{$index}}"  [disabled]="data.readonly"/>
    </td>
    <td> <input class="form-control" type="text" id="userListKeywords" [(ngModel)]="userList[$index].keywords"
        name="userListKeywords{{$index}}" [disabled]="data.readonly"/></td>
  </tr>
 </tbody>

---

新空行的索引为

$index===userList-1

，因为它是该集合的最后一项。可以使用该条件并应用所需的任何属性

<td>
<input
    class="form-control"
    type="text"
    id="userListKeywords"
    [(ngModel)]="userList[$index].keywords"
    name="userListKeywords{{$index}}"
    [attr.disabled]="true" readonly/>
</td>

    <td> <input class="form-control" type="text" id="userListImage" [(ngModel)]="userList[$index].image"
        name="userListImage{{$index}}"  [disabled]="data.readonly"/>
    </td>
    <td> <input class="form-control" type="text" id="userListKeywords" [(ngModel)]="userList[$index].keywords"
        name="userListKeywords{{$index}}" [disabled]="data.readonly"/></td>
  </tr>
 </tbody>

然后

<td>
<input
    class="form-control"
    type="text"
    id="userListKeywords"
    [(ngModel)]="userList[$index].keywords"
    name="userListKeywords{{$index}}"
    [attr.disabled]="userList[$index].readonly" readonly/>
</td>

    <td> <input class="form-control" type="text" id="userListImage" [(ngModel)]="userList[$index].image"
        name="userListImage{{$index}}"  [disabled]="data.readonly"/>
    </td>
    <td> <input class="form-control" type="text" id="userListKeywords" [(ngModel)]="userList[$index].keywords"
        name="userListKeywords{{$index}}" [disabled]="data.readonly"/></td>
  </tr>
 </tbody>

---

[attr.disabled]=“userList[$index].readonly”

仔细查看以下代码：

    <td> <input class="form-control" type="text" id="userListImage" [(ngModel)]="userList[$index].image"
        name="userListImage{{$index}}"  [disabled]="data.readonly"/>
    </td>
    <td> <input class="form-control" type="text" id="userListKeywords" [(ngModel)]="userList[$index].keywords"
        name="userListKeywords{{$index}}" [disabled]="data.readonly"/></td>
  </tr>
 </tbody>

    <td> <input class="form-control" type="text" id="userListImage" [(ngModel)]="userList[$index].image"
        name="userListImage{{$index}}"  [disabled]="data.readonly"/>
    </td>
    <td> <input class="form-control" type="text" id="userListKeywords" [(ngModel)]="userList[$index].keywords"
        name="userListKeywords{{$index}}" [disabled]="data.readonly"/></td>
  </tr>
 </tbody>

---

索引1和3将被禁用

您可以声明一个用于标识来自后端的数组大小的变量（如initialArraySize），然后在添加新行时验证该行的索引是否大于初始数组大小，如果为真，则使其可编辑

    <td> <input class="form-control" type="text" id="userListImage" [(ngModel)]="userList[$index].image"
        name="userListImage{{$index}}"  [disabled]="data.readonly"/>
    </td>
    <td> <input class="form-control" type="text" id="userListKeywords" [(ngModel)]="userList[$index].keywords"
        name="userListKeywords{{$index}}" [disabled]="data.readonly"/></td>
  </tr>
 </tbody>

<tbody>
<tr *ngFor="let data of userList; let index = index">
    <td> <input class="form-control" type="text" id="userListName" [(ngModel)]="userList[index].name"
        name="userListName{{index}}" [readonly]="index >== initialArraySize"/></td>
</tr>
</tbody>

我相信如果我在表中添加两行或更多空行，这种情况将不起作用。我可以使输入不可编辑。我的问题是如何在循环中使一些输入可编辑。我正在寻找一种UI方法。我从后端接收jsonUser对象，我无法对API进行更改。默认情况下，在开始时，您可以初始化jsonUser项true，然后根据需要继续更新只读属性。在收到响应后，修改它

userJson.forEach（项=>item.readonly=false）

并根据业务逻辑不断更新userJson在这种情况下，当添加新行时，item.readonly将作为false应用于新行，因为它位于*ngFor中。正如我提到的，我不希望对数组进行任何更改。我从后端收到JSON，我无法更改API。我在寻找UI方法你知道哪个索引将被禁用吗？你将如何检查哪个输入应该被禁用，哪个启用请检查接受的答案。这就是我解决问题的方法。