Ошибка при добавлении атрибута "для" в метку в шаблоне angular 2.0

Я использую структуру Angular 2.0 и пытаюсь создать компонент ввода. Кроме того, я использую MDL Google и его структуру HTML, требуемую для ввода меток. Angular дает мне исключение:

EXCEPTION: Template parse errors:
Can't bind to 'for' since it isn't a known native property ("s="mdl-textfield__input" type="text" id="{{input_id}}">
        <label class="mdl-textfield__label" [ERROR ->]for="{{input_id}}">{{input_label}}</label>
    </div>"): [email protected]:44

Вот код:

import {Component} from 'angular2/core';
import {Input} from 'angular2/core';

@Component({
    selector: 'input-username',
    template: `<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input class="mdl-textfield__input" type="text" id="{{input_id}}">
        <label class="mdl-textfield__label" for="{{input_id}}">{{input_label}}</label>
    </div>`
})

export class InputUsernameComponent {
    @Input('input-id') input_id: string;
    @Input('input-label') input_label: string;
}

Как я могу решить эту проблему?

Ответ 1

Обновление

В последних версиях Angular2 for автоматически следует отображать на htmlFor, чтобы избежать этой проблемы.

оригинальный

Вам требуется привязка атрибута вместо правильной привязки

<label class="mdl-textfield__label" attr.for="{{input_id}}">{{input_label}}</label>

или

 <label class="mdl-textfield__label" [attr.for]="input_id">{{input_label}}</label>

или

<label class="mdl-textfield__label" htmlFor="{{input_id}}">{{input_label}}</label>

htmlFor - это свойство, которое отражает атрибут for (https://developer.mozilla.org/de/docs/Web/API/HTMLLabelElement)

См. также HTML-атрибуты и свойства