Question

H l l l o！

我有几个与ngFor中的ngModel绑定的复选框，但是如果我的标记包含在<form>标记中，则UI意外地工作。例如 [checked]="team.original“和[disabled]="!group.internal"不符合要求。

https://plnkr.co/edit/yxngdinXlHD1G9ITeGLT?p=preview

谢谢！

修改

例如，你看到[checked] =“team.original”和[disabled] =“！group.internal”它们根据它的值不起作用。同样对于'原始'列我打印实际值 - 'false'但是检查了chackbox。

Answer 1

在表单中，名称必须是唯一的。所以现在以你的形式，它不被评估为两个不同的团队，因为name属性是相同的。这里通常使用索引来区分迭代中的名称，所以：

*ngFor="let team of group['teams']; let i=index"

和name属性

name="read{{i}}"

您还有一个问题，因为teams位于两个不同的组中，每个团队在其单独的数组中都有索引0。因此，如果使用上述内容，您最终会得到相同的name属性。

read{{i}}最终会read0仍然无法解决您的问题，因为它会被评估为同一个表单名称。因此，您需要使用TWO索引，包括顶级迭代和嵌套迭代：

<div *ngFor="let group of groups; let j=index">

和

<tr *ngFor="let team of group['teams']; let i=index">

并标记您的name属性：

name="read{{j}}{{i}}"

现在表单中的所有项目都有唯一的名称，因此表单值的结果如下所示：

{
  "read00": true,
  "download00": true,
  "original00": false,
  "read10": true,
  "download10": true,
  "original10": true,
  "contribute10": true,
  "manage10": false
}

这就是表单的工作原理。所有名称都必须是唯一的。

这是你的分叉Plunker

为什么用我的ngModel和属性绑定形成标签混乱？ ngFor在Form标签内的ngModel

1 个答案: