web-dev-qa-db-fra.com

Angular2 utilise la valeur enum dans l'attribut de valeur html

J'essaie d'utiliser une valeur d'énumération pour définir la valeur sélectionnée d'un attribut HTML:

export enum MyEnum {
    FirstValue,
    SecondValue
}
export function MyEnumAware(constructor: Function) {
    constructor.prototype.MyEnum = MyEnum;
}

@MyEnumAware
@Component({
    templateUrl: "./lot-edit.component.html",
    styleUrls: ["./lot-edit.component.css"],
})
export class LotEditComponent implements OnInit {
    @Input() myEnumValue: MyEnum ;

}

<td><input name="status" type="radio" [value]="MyEnum.FirstValue" [(ngModel)]="myEnumValue"></td>
<td><input name="status" type="radio" [value]="MyEnum.SecondValue" [(ngModel)]="myEnumValue"></td>

mais j'obtiens "Impossible de lire la propriété 'FirstValue' de indéfini"

Existe-t-il un moyen d'utiliser une valeur d'énumération comme valeur d'attributs html?

angulartypescriptenums
16
wonbyte

Votre modèle ne peut accéder qu'aux variables membres de sa classe de composants. Donc, si vous souhaitez utiliser les valeurs de l'énumération, affectez-la (l'énumération) à une variable membre.

Dans votre composant,

export class MyComp {
  MyEnum = MyEnum;
  .....
}

Ensuite, vous êtes libre d'accéder aux éléments de l'énumération dans votre modèle.

32
snorkpete

Vous pouvez utiliser une énumération pour attribuer à l'élément html comme ci-dessous

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <input type="text" [(ngModel)]="value"/>
    </div>
  `,
})
export class App {
  name:string;
  myValue:any= MyEnum;
  value:string;
  constructor() {
    this.name = 'Angular2';
    this.value=this.myValue[1];
    console.log(this.value);
  }
}

Étant donné que vous utilisez [(ngModel)] sur l'élément d'entrée, vous ne pouvez pas attribuer à la propriété [value] de l'élément d'entrée.

LIVE DEMO

2
Aravind