Angular组件获取API返回JSON/对象后无法使用patchValue更新表单控件

• 异步执行顺序错误：this.dataservice.getfltdetails 是异步请求，subscribe 内的赋值逻辑会等到接口返回后才执行，你把 patchValue 写在 subscribe 外部，代码执行时请求还没返回，this.flightdetails 还是初始的空值/undefined，自然取不到origin和dest字段。
• patchValue 参数格式错误：Angular FormGroup 的 patchValue 方法接收的是与表单结构对应的纯对象，你传入了外层包裹的数组，格式不匹配，就算有有效值也无法正常赋值到表单控件。

修改getFlightDetails代码，将赋值逻辑移到subscribe回调内部，同时修正patchValue的参数格式，建议额外对接口返回的字段做去空格处理，避免返回值自带的多余空格影响后续业务逻辑：

getFlightDetails(){
  const formValues = this.form.value;
  if (formValues.gregdate!==null && formValues.flightno !==null) {
    const gdate = formatDate(formValues.gregdate,'yyyy-MM-dd','en');
    const fltnumber= formValues.flightno;
    this.dataservice.getfltdetails(gdate,fltnumber)
    .subscribe(fd =>{
      this.flightdetails = fd;
      console.log(this.flightdetails);
      // 赋值逻辑移到回调内，参数改为纯对象，同时去空格
      this.form.patchValue({
        origin: this.flightdetails.origin?.trim() || '',
        dest: this.flightdetails.destination?.trim() || ''
      })
    })  
  }  
}

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