Question

考虑以下plunker

import {Component} from 'angular2/core'

@Component({
  selector: 'my-app',
  template: `
    <div *ngFor="#option of myHashMap">
        <input type="radio" name="myRadio" id="{{generateId(option['id'])}}">
        <label for="{{generateId(option['id'])}}">
            {{option['name']}}
        </label>
    </div>        
    `
})
export class App {

    myHashMap = [{'name': 'myName1', 'id': 'id1'},{'name': 'myName2', 'id': 'id2'}]

    generateId(key) {
      return "myKey" + key;
    }
}

我正在尝试将字符串绑定到id中的input和for中label的相同字符串。但是我遇到了

Can't bind to 'for' since it isn't a known native property ("hMap">
    <input type="radio" name="myRadio" id="

是否有一种角色的惯用方式来实现这一目标？

Answer 1

id 可以绑定使用其中一个

id="{{someProp}}"
[id]="someProp"

因为 id 是每个元素的属性。

对于 for ，您需要使用

之一

[attr.for]="someProp"
attr.for="{{someProp}}"
[htmlFor]="someProp"
htmlFor="{{someProp}}"

因为 htmlFor 是反映到for属性的属性。

另见Properties and Attributes in HTML

Plunker example

Answer 2

绑定属性值的正确方法：

[attr.id]="value"

无论如何，使用Angular2轻松地将自定义字符串绑定到id和html元素中？

2 个答案: