Angular 5中select标签默认选中值设置问题：代码未生效

在Angular的模板驱动表单（使用ngModel）里，直接用原生的[selected]属性通常不会生效——因为Angular会接管表单控件的状态管理，原生属性会被Angular的绑定逻辑覆盖。正确的做法是通过数据绑定来设置ngModel的初始值，让Angular自动帮你选中对应的选项。

步骤1：在组件类中设置初始选中值 #

首先，你需要在组件的.ts文件里定义一个变量来绑定ngModel，并在钱包数据加载完成后，把这个变量设置为第一个钱包的地址：

import { Component, OnInit } from '@angular/core';

@Component({
  // 你的组件元数据（比如selector、templateUrl等）
})
export class YourComponent implements OnInit {
  wallets: any[] = [];
  selectedAddress: string; // 用于绑定ngModel的变量

  ngOnInit(): void {
    // 情况1：如果wallets是同步初始化的
    this.wallets = [
      { label: '钱包1', address: 'addr1' },
      { label: '钱包2', address: 'addr2' }
      // 更多钱包数据
    ];
    // 确保数组不为空时设置初始值
    if (this.wallets.length > 0) {
      this.selectedAddress = this.wallets[0].address;
    }

    // 情况2：如果wallets是异步获取的（比如从API请求）
    // this.walletService.getWallets().subscribe((wallets) => {
    //   this.wallets = wallets;
    //   if (this.wallets.length > 0) {
    //     this.selectedAddress = this.wallets[0].address;
    //   }
    // });
  }
}

步骤2：修改模板中的select绑定 #

把模板里的ngModel绑定到上面定义的selectedAddress变量，同时移除[selected]属性——Angular会根据selectedAddress的值自动匹配并选中对应的option：

<select class="form-control input-transparent" id="select-field" name="address" [(ngModel)]="selectedAddress" required>
  <optgroup *ngFor="let wallet of wallets" label="{{wallet.label}}">
    <option value="{{ wallet.address }}">{{ wallet.address }}</option>
  </optgroup>
</select>

额外检查点 #

如果还是没生效，可以排查以下几点：

• 确认wallets数组在组件初始化时已经有数据（异步加载的话，一定要在数据返回后再设置selectedAddress）
• 确保selectedAddress的值和option的value类型完全一致（比如都是字符串，不要出现数字和字符串不匹配的情况）
• 如果你在使用表单分组（formGroup），要确保ngModel的绑定符合表单组的结构（不过你这里用的是独立的ngModel，这条可以忽略）

内容的提问来源于stack exchange，提问作者Hamid Aijaz