angular - Angular2 sử dụng giá trị enum trong thuộc tính value của html

Tôi đang cố gắng sử dụng một giá trị enum để đặt giá trị được chọn của một thuộc tính 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>

tuy nhiên tôi nhận được "Không thể đọc thuộc tính 'FirstValue' của undefined"

Có cách nào sử dụng giá trị của enum làm giá trị của các thuộc tính html không?

Câu trả lời #1

Mẫu của bạn chỉ có thể truy cập các biến thành viên của lớp thành phần của nó. Vì vậy, nếu bạn muốn sử dụng các giá trị của enum, hãy gán nó (enum) cho một biến thành viên.

Trong thành phần của bạn,

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

Sau đó bạn có thể tự do truy cập các phần tử của enum trong mẫu của mình.

Câu trả lời #2

Bạn có thể sử dụng một enum để gán cho phần tử html như dưới đây

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

Vì bạn đang sử dụng [(ngModel)] trên phần tử input, bạn không thể gán cho thuộc tính [value] của phần tử input.

TRẢI NGHIỆM TRỰC TIẾP