Angular 2 - 带有复选框和相应标签的 *ngFor [重复]答案

【问题标题】：Angular 2 - *ngFor with checkbox and corresponding label [duplicate]Angular 2 - 带有复选框和相应标签的 *ngFor [重复]
【发布时间】：2016-04-12 14:55:10
【问题描述】：

我正在处理 Angular 2 中的数据表。

我的<table-component> 是一个普通的<table>，在里面我尝试使用Angular 的*ngFor 将<tr>s 相乘，如下所示：

<tr *ngFor="#person of persons; #i = index">

每个<tr> 都有几个字段，一个checkbox 带有label。

我这样设置checkbox的id属性：

<input type="checkbox" id="checkbox{{i}}">
<label for="checkbox{{i}}">{{person.finished}}</label>

其中 {{i}} 是来自 ngFor 的局部变量。它工作正常，但仅适用于复选框。

当我尝试对label 中的“for”属性执行相同操作时，我只会得到错误。

Unhandled Promise rejection: Template parse errors:
Can't bind to 'for' since it isn't a known native property ("
   <div>
        <input type="checkbox" id="checkbox{{i}}">
        <label [ERROR ->]for="checkbox{{i}}">{{person.finished}}</label>
    </div>
</td>

我的问题是：

如何使用 Angular 2 的 ngFor 设置标签的“for”属性，以便它们指向正确的复选框？

【问题讨论】：

标签： angular

【解决方案1】：

您应该使用以下设置属性值：

<label [attr.for]="'checkbox'+i">{{person.finished}}</label>

【讨论】：

你能发布一个完整的例子吗？