Anuglar 4-已选择进行枚举,而枚举不起作用

时间:2018-11-09 22:46:38

标签: javascript html angular typescript

我有以下枚举:

export enum Category {
  SYSTEM = 0,
  NAVIGATION = 1,
  MESSAGING = 2,
  MEDIA = 3
}

并通过以下方式映射到标签:

export const CategoryMapping = [
    { value: Category.SYSTEM, label: 'System' },
    { value: Category.NAVIGATION, label: 'Navigation'},
    { value: Category.MESSAGING, label: 'Messaging'},
    { value: Category.MEDIA, label: 'Media'}
];

我还有一个对象,该对象的类别为字段。

我的目标是在选择中显示类别,将其绑定到对象的类别字段,并在显示时默认显示当前值:

<select class="form-control" id="category" [(ngModel)]="myObj.category">
      <option
        *ngFor="let category of categories"
        [ngValue]="category.value"
        [selected]="category.value == myObj.category">
          {{ category.label }}
      </option>
    </select>

我所指的categories是映射。

但是,默认情况下未选择任何值。我知道ngModel和ngValue类型必须相同,但是隐式枚举是整数,因此我认为它可以工作。同样,对于匹配的类别,所选表达式的结果为true,但默认情况下仍未选中。

1 个答案:

答案 0 :(得分:2)

默认情况下,当您尝试使用enum值时,它们将返回其当前索引。我认为您假设会获得为枚举编写的string值。

您必须稍微调整enum,而不是像Category.SYSTEM那样使用枚举值到Category[Category.SYSTEM],这将返回string

export const [
    { value: Category[Category.SYSTEM], label: 'System' },
    { value: Category[Category.NAVIGATION], label: 'Navigation' },
    { value: Category[Category.MESSAGING], label: 'Messaging' },
    { value: Category[Category.MEDIA], label: 'Media' }
];

Demo Stackblitz