javascript - 无论如何可以使用 Angular2 轻松地将自定义字符串绑定(bind)到 id 和 for in html 元素？

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

我正在尝试将一个字符串绑定(bind)到 input 中的 id 并将相同的字符串绑定(bind)到 label 中的 for .但是我遇到了

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

是否有 angular2 惯用的方法来实现这一目标？

Answer 1

id 可以绑定(bind)到使用其中之一

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

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

对于 你需要使用其中之一

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

因为 htmlFor 是反射(reflect)到 for 属性的属性。

另见 Properties and Attributes in HTML

Plunker example