Angular 11模板表单下拉框默认选首项及触发change事件问题

Angular 模板表单中，当 ngModel 绑定的初始值和所有 <option> 的 value 都不匹配时，框架会自动插入一条空白选项。你当前的 query.agency 初始为空对象的属性，默认值是 undefined，和现有渲染的选项值都不匹配，就会出现空白项。而 selected 属性优先级低于 ngModel 绑定，所以单独加也不会生效。

步骤1：赋值下拉框默认值 #

在你获取到 agencies 数组数据的逻辑后，直接给 query.agency 赋值为数组第一项的 agencyCode，保证初始值和第一个选项的 value 匹配。

步骤2：手动触发change逻辑 #

赋值完成后直接调用 onAgencyChange() 方法，不需要等待用户交互，就能完成第二个下拉框的赋值。

组件类代码 #

query: any = {};
isTrueOrFalse: boolean = false; 
agencies: any[] = [];

// 示例：你获取agencies数据的接口回调
getAgencyList() {
  this.http.get('你的接口地址').subscribe(res => {
    this.agencies = res.data;
    // 新增逻辑开始
    if(this.agencies.length > 0) {
      this.query.agency = this.agencies[0].agencyCode;
      // 手动触发change对应的业务逻辑
      this.onAgencyChange();
    }
    // 新增逻辑结束
    this.isTrueOrFalse = false; // 按你的原有逻辑设置即可
  })
}

onAgencyChange() {
  // 你原有给第二个下拉框赋值的逻辑
  console.log('当前选中的agency：', this.query.agency)
}

模板代码 #

你的原有模板代码无需修改，只要保证 isTrueOrFalse 为 false 时，空值的 Select Agency... 选项不会渲染即可。

<select name="agency" id="agency" class="form-control" [(ngModel)]="query.agency" (change)="onAgencyChange()">
      <option  *ngIf="isTrueOrFalse" value=""  >Select Agency...</option> 
      <option *ngFor="let agency of agencies; let i = index" [value]="agency.agencyCode" >{{agency.agencyCode}} - {{agency.agencyName}}</option>
</select>

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