Angular服务调用后动态设置select选中值失效如何解决？

你遇到的问题核心是两个常见的Angular表单绑定问题：

• 下拉选项<option>未显式绑定值，ngModel无法匹配选中值对应的选项
• 异步回调中更新对象属性后，Angular变更检测未及时触发

步骤1：给下拉选项绑定value值 #

修改HTML中的<option>标签，显式绑定每个选项对应的value，让ngModel可以正确匹配选中值：

<select class="inpt-width100pc" id="sectionorder" name="sectionorder" 
        [(ngModel)]="selectednode.sectionOrder">
  <option *ngFor="let sectionOrder of sectionOrders;" [value]="sectionOrder">
    {{sectionOrder}} 
  </option>
</select> 

步骤2：确认值的一致性 #

在服务回调中打印this.selectednode.sectionOrder的值，确认和sectionOrders数组中的对应字符串完全一致，无前后空格、大小写差异、特殊字符差异。

步骤3：手动触发变更检测 #

如果修改完HTML后仍未生效，说明异步回调中的值更新没有被Angular变更检测捕获，手动注入变更检测器触发检测即可：
首先在TS文件的构造器中注入ChangeDetectorRef：

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

constructor(private cdr: ChangeDetectorRef) { }

然后在服务回调的赋值逻辑完成后调用变更检测：

itemStructurePopulateTree(formId:string) {
  this.service.getItemStructureInfo(this.examId,formId,this.candidateJourneyId).subscribe(data=>{
    // 原有逻辑不变
    this.examForms = data.examForms;
    const initData = data.examSection;
    this.updateRandomCount(data.examSection);
    const initArrayData  = [initData];
    this.dataSource.data  = initArrayData;
    if (!this.treeControl.isExpanded(initData)) {
      this.treeControl.expand(initData);
    }
    this.selectednode = this.dataSource.data[0];
    if(this.selectednode && !this.selectednode.sectionOrder){
       this.selectednode.sectionOrder = "Select one";
    }
    this.selectedForm = { formId:data.selectedFormId,formName:data.selectedFormName,userAction:null};
    this.refreshTreeData();
    // 新增：手动触发变更检测
    this.cdr.detectChanges();
  },
  error => console.log("Error occured",error)
  );
}

如果仍有异常，可以将双向绑定拆分为单向绑定+事件回调，更精准控制值更新逻辑：

<select class="inpt-width100pc" id="sectionorder" name="sectionorder" 
        [ngModel]="selectednode.sectionOrder"
        (ngModelChange)="updateSectionOrder($event)">
  <option *ngFor="let sectionOrder of sectionOrders;" [value]="sectionOrder">
    {{sectionOrder}} 
  </option>
</select> 

TS中新增更新方法：

updateSectionOrder(newVal: string) {
  this.selectednode.sectionOrder = newVal;
  this.cdr.detectChanges();
}

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