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

问题描述

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

 < form#f ="ngForm" novalidate>< table>< tr>< th</th>< th> Id</th>< th>名称</th>< Initial</th></tr>< tr * ngFor =让名字叫名字">< td><输入type ="checkbox" [checked] ="chk" [(ngModel)] ="name"></td>< td> {{name.id}}</td>< td> {{name.name}}</td>< td> {{name.Initial}}</td></tr></table>< button type ="submit"(点击)=保存(f.value，f.valid)> Submit</button></form> 

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

柱塞链接

解决方案

在表单中，您不会看到整行"(整行，我想是指ID，名称和首字母)表单的 value 属性，因为只有选中的布尔值才是Angular表单的一部分-这意味着它是唯一使用 ngModel 的表单.

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

 < div>< form#f ="ngForm"(ngSubmit)=保存(f.valid，名称)" novalidate>< table>< tr>< th</th>< th> Id</th>< th>名称</th>< Initial</th></tr>< tr * ngFor =让名字叫名字">< td><输入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>表单详细信息:-</div>< pre * ngIf ="f.submitted">提交的值:< br> {{names |json}}</pre></div> 

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

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

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