Angular2:表格中带有 *ngFor 的复选框 [英] Angular2:Checkbox with *ngFor in a table

问题描述

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

 
<表格><tr><th></th><th>Id</th><th>姓名</th><th>初始</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><button type="submit" (click)="save(f.value, f.valid)>提交</button></表单>

我想显示表格中选中的行，但出现错误.我是 Angular2 的新手.对此有什么帮助吗?

Plunker 链接

解决方案

你有表格的方式，你不会在表单的 value 属性，因为只有选中的布尔值是 Angular 表单的一部分 - 这意味着它是唯一一个使用 ngModel 的表单.

要确定检查的内容，(请参阅下面的 plunkr)您可以将检查状态绑定回每个名称条目，并在提交时检查名称集合以查看哪些被检查，然后显示"该数据(再次不确定要显示的已检查行"是什么意思).

 
<form #f="ngForm" (ngSubmit)="save(f.valid, names)" novalidate><表格><tr><th></th><th>Id</th><th>姓名</th><th>初始</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><button type="submit">提交</button></表单><小时>
<div><div>表格详情:-</div><pre *ngIf="f.submitted">提交的值:<br>{{names |json}}</pre>

注意:您也可以绑定表单的ngSubmit输出事件，在表单提交时调用save等.

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

I have an HTML table with a checkbox associated to each row. By default all the rows would checked initially.

    <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>

I want to display checked rows of the table but I'm getting error. I'm new to Angular2. Any help on this?

Plunker Link

解决方案

The way you have the form, you won't see the 'whole row' (by whole row I presume you mean the ID, Name and Initial) in the form's value property as only the checked boolean value is part of the Angular form - meaning it is the only one using ngModel.

To determine what is checked, (see below from your plunkr) you could bind the checked state back to each name entry, and on submit you inspect the names collection to see which are checked, and then 'show' that data (again not sure what you mean by 'checked rows to be shown').

 <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>

Note: you can also bind to the form's ngSubmit output event to call save etc when the form is submitted.

If you want to inspect the form's value rather than two-way binding back to the names data, then you need to include the fields for Id, Name and Initial in the form using ngModel.

这篇关于Angular2:表格中带有 *ngFor 的复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！