web-dev-qa-db-ja.com

Angular2はHTML値属性で列挙値を使用します

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>

しかし、「未定義のプロパティ 'FirstValue'を読み取れません」を取得します

HTML属性の値として列挙値を使用する方法はありますか？

angulartypescriptenums
16
wonbyte

テンプレートは、そのコンポーネントクラスのメンバー変数にのみアクセスできます。そのため、enumの値を使用する場合は、それ（Enum）をメンバー変数に割り当てます。

コンポーネントで、

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

その後、テンプレートの列挙型の要素に自由にアクセスできます。

32
snorkpete

以下のように、enumを使用してhtml要素に割り当てることができます

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

入力要素で[（ngModel）]を使用しているため、入力要素の[value]プロパティに割り当てることはできません。

LIVE DEMO

2
Aravind