Question

我想实现选择菜单，该菜单使用枚举数据显示数据并根据所选字符串保存数字：

我尝试过：

ENUM：

export enum MerchantStateType {
  being_set_up = 1,
  live_for_processing = 2,
  trading_suspended = 3,
  account_suspended = 4,
}

export const MerchantStateType2LabelMapping = {
  [MerchantStateType.being_set_up]: "Being set up",
  [MerchantStateType.live_for_processing]: "Live for processing",
  [MerchantStateType.trading_suspended]: "Trading suspended",
  [MerchantStateType.account_suspended]: "Account suspended",
}

组件：

public MerchantStateType2LabelMapping = MerchantStateType2LabelMapping;

public stateTypes = Object.values(MerchantStateType);

HTML代码：

<select class="custom-select" name="state_raw" [(ngModel)]="merchant.state_raw" id="state_raw" required>
      <!--<option selected></option>-->
      <option [value]="stateType" *ngFor="let stateType of stateTypes">{{ MerchantStateType2LabelMapping[stateType] }}</option>

默认情况下如何选择第一个菜单项？

Answer 1

您都可以在ngOnInit（）中添加以下内容

this.merchant.state_raw = this.stateTypes[0]

（或）您可以使用* ngFor的局部变量“ first”

<select class="custom-select" name="state_raw" [(ngModel)]="merchant.state_raw" id="state_raw" required>
      <!--<option selected></option>-->
      <option [value]="stateType" *ngFor="let stateType of stateTypes; first as isFirst" [selected]="isFirst">{{ MerchantStateType2LabelMapping[stateType] }}</option>
</select>

Answer 2

在需要ngOnInit（），Constructor（）的任何地方设置初始值：

this.merchant.state_raw = 1;

state_raw保存枚举的索引。您的选择如下所示：

<select class="custom-select" name="state_raw" [(ngModel)]="marchant.state_raw" id="state_raw" required>
  <option [value]="stateType" *ngFor="let stateType of stateTypes">{{ MerchantStateType2LabelMapping[stateType] }}
    </option>
    </select>

从以下位置修改您的组件

public stateTypes = Object.values(MerchantStateType);

收件人：

 public stateTypes = Object.values(MerchantStateType).filter(type =>
    isNumber(<any>type)
  );

这将从您的值中删除您的ID，仅获取字符串

Answer 3

您的HTML

 <select class="custom-select" name="state_raw" [(ngModel)]="current" id="state_raw" required>
          <!--<option selected></option>-->
          <option [value]="stateType" *ngFor="let stateType of stateTypes">{{ MerchantStateType2LabelMapping[stateType] }}</option>

Ts：

public current = 1;

现在，选择字段的值将与变量this.current一起获得。

默认情况下选择第一个菜单项

3 个答案: