Angular2：表格中带有*ngFor的复选框

我有一个HTML表格，每一行都有一个复选框。默认情况下，最初会选中所有行

    <form #f="ngForm" novalidate>
          <table>
            <tr>
              <th></th>
              <th>Id</th>
              <th>Name</th>
              <th>Initial</th>
            </tr>
            <tr *ngFor="let name of names">
              <td><input type="checkbox" [checked]="chk" [(ngModel)]="name"></td>
              <td>{{name.id}}</td>
              <td>{{name.name}}</td>
              <td>{{name.Initial}}</td>
            </tr>
          </table>
            <button type="submit" (click)="save(f.value, f.valid)>Submit</button>
   </form>

身份证件
名称
最初的
{{name.id}
{{name.name}
{{name.Initial}}
您需要进行一次更改才能显示此表单

这：


必须是这样的：

<input type="checkbox" #i checked name="{{name.name}}" [(ngModel)]="i.checked">


这将使表单显示，但不会使表单提交工作。看起来您仍然需要对单击事件内容进行编码。
在表单中，表单名称必须是唯一的，以区分字段。因此，这里我们可以使用数组中每个对象的唯一名称

name="{{name.name}}"

由于单选按钮和复选框在表单中仍然存在一些缺陷，我一直在努力解决这些问题，并（最终）找到了解决方案

因为在表单中，表单名称属性几乎覆盖了所有内容，这意味着现在
[checked]=“chk”
不再起作用

我解决这个问题的方法是使用模板变量
[（ngModel）]
和选中的“传统”
属性，因此最终的解决方案如下所示：

<input type="checkbox" #i checked name="{{name.name}}" [(ngModel)]="i.checked">



这是你的！：）
 使用表单的方式，您不会在表单的
值
属性中看到“整行”（我认为整行是指ID、名称和首字母），因为只有选中的布尔值是角度表单的一部分-这意味着它是唯一使用
ngModel
的

要确定检查了什么（请参见下面的plunkr），您可以将检查状态绑定回每个名称条目，并在提交时检查名称集合以查看哪些已检查，然后“显示”该数据（同样不确定“要显示的检查行”是什么意思）


身份证件
名称
最初的
{{name.id}
{{name.name}
{{name.Initial}}
提交

表格详情：-
提交值：
{names | json}

注意：您还可以绑定到表单的
ngSubmit
输出事件，以便在提交表单时调用save etc

如果您想检查表单的值，而不是双向绑定回名称数据，那么您需要使用
ngModel
在表单中包含Id、Name和Initial字段。您是否检查过plunker是否工作？@Aravind My bad。错过了“最后。显示选中的行”是什么意思？显示在哪里？在表单上？或在plunkr的控制台中？谢谢你的回答。但我想看的是，我希望在单击提交按钮后显示整个选中的行。凯，在你的问题中没有提到这一点……你说的“显示选中的行”是什么意思“提交表格后，显示在何处，如何显示？