在添加"for"时出现错误Angular 2.0模板中标签的属性

问题描述

我使用Angular 2.0框架并尝试创建输入组件.另外，我使用Google MDL，而且它的HTML结构需要输入标签.Angular给了我一个例外:

I use the Angular 2.0 framework and try to create an input component.Also I use Google MDL and it's HTML structure required to have labels to input.Angular gives me an exception:

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;
}

如何解决此问题?

推荐答案

更新

在最新的Angular2版本中，for应该自动映射到htmlFor，以避免此类问题.

In recent Angular2 versions for should be mapped to htmlFor automatically to avoid this kind of problem.

原始

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

You need attribute binding instead of proper binding

<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 )

htmlFor is the property that reflects the for attribute (https://developer.mozilla.org/de/docs/Web/API/HTMLLabelElement)

另请参见 HTML-属性与属性

这篇关于在添加"for"时出现错误Angular 2.0模板中标签的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！