Angular2を使用して、カスタム文字列をidとhtml要素に簡単にバインドする方法はありますか？

Question

は、私がinputでidに文字列とlabelでforに同じ文字列をバインドしようとしています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; 
    } 
} 

次考えてみましょう。しかし、私は実行する

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

これを達成するための角度2の慣習的な方法はありますか？

Answer 1

idは

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

のいずれかを使用して結合することができます。

あなたが htmlForが for属性に反映されているプロパティであるため、

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

のいずれかを使用する必要がforについては

。

がProperties and Attributes in HTML

Plunker example

Answer 2

属性値バインドするための正しい方法：idは、すべての要素のプロパティであるため、

[attr.id]="value"