在angular 2.0模板中将“for”属性添加到标签时出错

Question

我使用Angular 2.0框架并尝试创建一个输入组件。此外，我使用Google MDL，它的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>"): InputUsernameComponent@2: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;
}

如何解决此问题？

Answer 1

更新

最近Angular2版本<代码> < / >代码应该

源语言

你需要的属性绑定而不是适当的痣

<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-属性与属性