Angular 2 - *ngFor with checkbox and corresponding label [duplicate]

Question

im working on a data-table in Angular 2.

My <table-component> is a regular <table> and inside I'm trying to multiply <tr>s using Angular's *ngFor, like this:

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

Every <tr> has a couple of fields and one checkbox with a label.

I set the id attribute of the checkbox like so:

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

Where {{i}} is the local variable from ngFor. And it works fine, but only for the checkbox.

When I try to do the same for the atrribute "for" in the label I only get errors.

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>

My question is:

How can I set the "for" attribute of the labels using Angular 2's ngFor, so they point to the right checkbox?

Answer 1

You should use the following to set the attribut value:

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