Question

我正在尝试使用枚举值来设置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>

然而，我得到了＃34;无法阅读财产＆＃39; FirstValue＆＃39;未定义＆＃34;

有没有办法使用枚举值作为html属性的值？

Answer 1

您的模板只能访问其组件类的成员变量。因此，如果要使用枚举值，请将其（枚举）分配给成员变量。

在您的组件中，

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

然后您可以自由访问模板中枚举的元素。

Answer 2

您可以使用枚举分配给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

Answer 3

使用Angular 2 //枚举

import {IType} from '/itype';
export class DataComponent
{
getType(id:number):any
{
      return IType[id];
}
}

// angular 2类型脚本中的组件

<div>
{{getType(1)}}
</div>

//在你的html文件中

{{1}}

Angular2在html值属性中使用枚举值

3 个答案: