angular - Angular2 Enum-Wert im HTML-Value-Attribut verwenden

Ich versuche, einen Enum-Wert zu verwenden, um den ausgewählten Wert eines HTML-Attributs festzulegen:

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>

allerdings erhalte ich „Cannot read property 'FirstValue' of undefined“

Gibt es eine Möglichkeit, einen Enum-Wert als Wert von HTML-Attributen zu verwenden?

Antwort #1

Ihre Vorlage kann nur auf Member-Variablen ihrer Komponentenkategorie zugreifen. Wenn Sie also die Werte des Enums verwenden möchten, weisen Sie es (das Enum) einer Member-Variablen zu.

In Ihrer Komponente,

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

Dann können Sie in Ihrer Vorlage auf die Elemente des Enums zugreifen.

Antwort #2

Sie können ein Enum verwenden, um es wie unten gezeigt einem HTML-Element zuzuweisen

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

Da Sie [(ngModel)] am Eingabeelement verwenden, können Sie die [value]-Eigenschaft des Eingabeelements nicht zuweisen.

LIVE-DEMO