Question

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

我的<table-component>是一个普通的<table>，而我正在尝试使用Angular的* ngFor乘以<tr>，如下所示：

<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中的atrribute“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”属性，所以它们指向右边的复选框？

Answer 1

您应该使用以下内容设置attribut值：

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

Angular 2 - * ngFor带复选框和相应的标签

1 个答案: