时间戳

首页 > 解决方案 > Angular 4 - 选择用于枚举不工作的选择

javascript - Angular 4 - 选择用于枚举不工作的选择

问题描述

我有以下枚举：

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，但默认情况下仍未选中。

标签： javascripthtmlangulartypescript

解决方案

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

您必须进行一些调整enum，而不是像使用 enum 值那样Category.SYSTEM返回Category[Category.SYSTEM]a 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' }
];

演示 Stackblitz

推荐阅读