Question

我有这个列表：

export enum UserRoleType {
  masterAdmin = 'ROLE_MASTER_ADMIN'
  merchantAdmin = 'ROLE_MERCHANT_ADMIN'
  resellerAdmin = 'ROLE_RESELLER_ADMIN'
}

export const AdminRoleType2LabelMapping = {
  [UserRoleType.masterAdmin]: 'Master Admin'
};

export const MerchantRoleType2LabelMapping = {
  [UserRoleType.merchantAdmin]: 'Merchant Admin'
};

export const ResellerRoleType2LabelMapping = {
  [UserRoleType.resellerAdmin]: 'Reseller Admin'

};


public ResellerRoleType2LabelMapping = ResellerRoleType2LabelMapping;
  public roleTypes = Object.values(UserRoleType).filter(value => typeof value === 'string');

下拉菜单：

<select class="custom-select" formControlName="role">
        <option [value]="roleType" *ngFor="let roleType of roleTypes">{{ ResellerRoleType2LabelMapping[roleType] }}</option>
        <div class="help-block form-text with-errors form-control-feedback" *ngIf="controlHasErrors('role')">
          {{controlValidateMessage('role')}}
        </div>
      </select>

我想根据页面的类型显示不同的const。但是由于某种原因，我得到带有几个空白行和所需列表的选择菜单。你知道我该怎么解决吗？

Answer 1

要正确填充roleTypes数组，请使用Object.keys而不是Object.values

public roleTypes = Object.keys(UserRoleType).filter(value => typeof value === 'string');

接下来，在您的enum的变量中声明component

userRoleType = UserRoleType;

现在您可以使用

在html下拉列表中获取枚举的值

<option *ngFor="let roleType of roleTypes" [value]="roleType">{{ userRoleType[roleType] }}</option>

一个醒目的演示是here。

从下拉菜单中删除白色

1 个答案: