是否可以使用Angular2将自定义字符串轻松绑定到html元素中的id和for

Is there anyway to easily bind custom string to id and for in html element using Angular2?

本文关键字：元素 html for id 绑定 Angular2 可以使 自定义 字符串 是否      更新时间：2023-09-26

考虑以下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;
    }
}

我正在尝试将一个字符串绑定到input中的id，并将相同的字符串绑定到label中的for。然而，我遇到了

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

有没有一种angular2惯用的方法来实现这一点？

id可以绑定到使用之一

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

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

对于for，您需要使用之一

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

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

另请参阅HTML 中的属性和属性

Plunker示例

绑定属性值的正确方法：

[attr.id]="value"
相关文章：