Question

我使用Angular 2.0框架并尝试创建输入组件。此外，我使用谷歌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版本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 - attributes vs properties

添加＆＃34;为＆＃34;时出错属性到角度2.0模板中的标签

1 个答案: