2

你好！

我有几个复选框，我在 ngFor 中与 ngModel 绑定，但是如果我的标记包含在<form>标签中，UI 会意外工作。例如 [checked]="team.original“并且[disabled]="!group.internal"它应该不起作用。

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

谢谢！

编辑：

例如，您是否看到 [checked]="team.original" 和 [disabled]="!group.internal" 根据其价值，它们不起作用。同样对于“原始”列，我打印实际值-“假”，但检查了 chackbox。

4

1 回答 1

0

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

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

和name属性

name="read{{i}}"

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

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

<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

于 2017-02-27T11:55:14.710 回答