javascript - ¿Hay alguna manera de vincular fácilmente una cadena personalizada a un id y para en un elemento HTML usando Angular2?

Considera el siguiente 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;
    }
}

Estoy tratando de vincular una cadena a id en input y la misma cadena a for en label. Sin embargo, me encuentro con

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

¿Hay una manera idiomática en Angular2 de lograr esto?

Respuesta #1

id se puede vincular utilizando uno de

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

porque id es una propiedad en cada elemento.

Para for necesitas usar uno de

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

porque htmlFor es la propiedad que se refleja en el atributo for.

Vea también Propiedades y Atributos en HTML

Ejemplo de Plunker

Respuesta #2

La manera correcta de vincular el valor del atributo:

[attr.id]="value"