删除空白行

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>

我要删除空白行。我试图只使用这样的键：

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

但是我只能得到空白行。

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

Answer 1

原因

ResellerRoleType2LabelMapping仅包含UserRoleType.resellerAdmin，但roleTypes具有所有角色。因此，当您询问ResellerRoleType2LabelMapping[UserRoleType.masterAdmin]时，您将获得“未定义”值。

解决方案

使用uniq“ labelMapping”。

打字稿

替换

public ResellerRoleType2LabelMapping = ResellerRoleType2LabelMa

作者

public labelMapping = {...AdminRoleType2LabelMapping, ...MerchantRoleType2LabelMapping, ...ResellerRoleType2LabelMapping};

HTML

并替换

{{ ResellerRoleType2LabelMapping[roleType] }}

作者

{{ labelMapping[roleType] }}

Answer 2

使用

roleTypes = Object.values(UserRoleType).filter(value => ResellerRoleType2LabelMapping[value]);

所以您要过滤ResellerRoleType2LabelMapping中的角色类型

https://stackblitz.com/edit/angular-1cukf6