默认选择第一个菜单项答案

【问题标题】：Select first menu item by default默认选择第一个菜单项
【发布时间】：2019-05-30 00:22:41
【问题描述】：

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

我试过了：

枚举：

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>

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

【问题讨论】：

标签： angular typescript angular6

【解决方案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>

【讨论】：

【解决方案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 并仅获取字符串

【讨论】：

【解决方案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 获得选择字段的值。

【讨论】：