Angular 5中如何设置HTML下拉选择框的选中值？

首先，你的核心问题在于两个异步数据源的时机不同步：managers从Firestore异步加载，property.manager又是在另一个输入框的change事件后才加载，这就导致你设置选中值的时候，要么下拉框的选项还没渲染出来，要么目标值还没到位，自然无法生效。下面是具体的排查点和解决方法：

1. 确保两个异步流都就绪后再设置选中值 #

你需要同时监听managers和property的变化，只有当两者都有可用数据时，再去匹配并设置选中值。可以用RxJS的combineLatest操作符来实现：

组件代码示例 #

import { Component, OnInit } from '@angular/core';
import { combineLatest } from 'rxjs';
import { tap } from 'rxjs/operators';

@Component({
  // 组件元数据
})
export class YourComponent implements OnInit {
  managers$: Observable<Manager[]>; // 你的Firestore数据源
  property$: Observable<Property>; // 对应输入框change后加载的property数据源
  selectedManagerName: string;

  constructor() {}

  ngOnInit(): void {
    // 同时监听两个异步流
    combineLatest([this.managers$, this.property$])
      .pipe(
        tap(([managerList, property]) => {
          // 确保两者都有有效数据
          if (managerList.length && property?.manager?.name) {
            this.selectedManagerName = property.manager.name;
          }
        })
      )
      .subscribe();
  }
}

2. 检查下拉框的绑定逻辑是否正确 #

如果你的下拉选项绑定的是整个Manager对象（而非仅仅name字符串），一定要用[ngValue]而非[value]——因为[value]只能处理字符串类型，对象会被强制转为[object Object]，根本无法匹配。

正确的HTML结构示例 #

<!-- 如果绑定的是name字符串 -->
<select [(ngModel)]="selectedManagerName">
  <option *ngFor="let manager of managers$ | async" [value]="manager.name">
    {{ manager.name }}
  </option>
</select>

<!-- 如果绑定的是Manager对象 -->
<select [(ngModel)]="selectedManager">
  <option *ngFor="let manager of managers$ | async" [ngValue]="manager">
    {{ manager.name }}
  </option>
</select>

如果是绑定对象的情况，设置选中值时建议用唯一ID匹配（比name更可靠）：

tap(([managerList, property]) => {
  if (managerList.length && property?.manager) {
    this.selectedManager = managerList.find(m => m.id === property.manager.id);
  }
})

3. 验证固定值无效的根本原因 #

你之前设置固定值'Subhan Ahmed'没生效，大概率是因为设置时机太早——managers还没加载完成，下拉框里根本没有这个选项。可以测试在managers加载完成后再设置：

this.managers$
  .pipe(
    tap(managerList => {
      if (managerList.length) {
        this.selectedManagerName = 'Subhan Ahmed';
      }
    })
  )
  .subscribe();

如果这样能生效，就坐实了是异步时机不匹配的问题。

4. 必要时手动触发变更检测 #

如果上述操作后视图还是没更新，可能是异步操作脱离了Angular的变更检测周期，可以手动注入ChangeDetectorRef来触发：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

// 在设置选中值后调用
this.cdr.markForCheck();

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