Question

我有一个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>

我想显示表格的已检查行，但我收到错误。我是Angular2的新手。对此有何帮助？

Plunker Link

Answer 1

你拥有表单的方式，你不会在表单的value属性中看到“整行”（整行我认为你的意思是ID，Name和Initial），因为只有被检查的布尔值是Angular表单的一部分 - 意味着它是唯一使用ngModel的表单。

要确定检查的内容，（请参阅下面的plunkr），您可以将检查状态绑定回每个名称条目，然后在提交时检查名称集合以查看检查的内容，然后“显示”该数据（再次不确定'要显示的已检查行'是什么意思。）

 <div>
      <form #f="ngForm" (ngSubmit)="save(f.valid, names)" 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" [(ngModel)]="name.checked" [name]="name.id"></td>
          <td>{{name.id}}</td>
          <td>{{name.name}}</td>
          <td>{{name.Initial}}</td>
        </tr>
      </table>
        <button type="submit">Submit</button>
    </form>
        <hr>
    </div>
    <div>
          <div>Form details:-</div>
          <pre *ngIf="f.submitted">submitted value: <br>{{names | json}}</pre>
    </div>

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

如果要检查表单的值而不是双向绑定回名称数据，则需要使用ngModel在表单中包含Id，Name和Initial的字段。

Answer 2

您需要进行一次更改才能显示此表单。

此：

<td><input type="checkbox" [checked]="chk" [(ngModel)]="name"></td>

需要这样的事情：

<td><input type="checkbox" [checked]="chk" [id]="id" [name]="id"></td>

这将使表单显示，它不会使表单提交工作。看起来您仍然需要对点击事件进行编码。

Answer 3

在表单中，表单名称必须是唯一的，以区分字段。所以在这里我们可以使用例如数组中每个对象的每个唯一名称。

name="{{name.name}}"

按照单选按钮和复选框仍然（？）在形式上有点麻烦，我一直在努力解决这些问题并且（最终）找到了解决方案。

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

我想出来解决这个问题的方法是将模板变量用作[(ngModel)]和“传统”checked属性，所以最终解决方案如下所示：

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

这是你的Forked Plunker！：）

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

3 个答案: