Angular中Observable返回数据用patchValue填充响应式表单报错如何解决？

问题根源 #

你遇到的报错和填充失败是两个独立问题共同导致的：

1. 类型不匹配报错：你声明的ticket是ticketModel[]数组类型，而你直接把数组当作单个ticketModel对象访问field1等属性，数组本身不存在这些属性，所以编译器抛出类型错误。从你给出的接口返回示例也能看到，数据是包裹在数组里返回的：[{"id":18,...}]。
2. 异步逻辑顺序错误：你把patchValue逻辑写在了subscribe回调外部，HTTP请求是异步操作，请求还没返回数据时就已经执行了patchValue，此时ticket还没有赋值，自然无法填充表单。

修复方案 #

方案1（推荐，后端适配，符合按ID查询的语义） #

让后端接口按ID查询时直接返回单个对象，而非长度为1的数组，对应修改以下代码：

1. 修改service.ts的返回类型

// service.ts
getById(id: string): Observable<ticketModel> {
  return this.http
    .get<ticketModel>(`${this.url}/${id}`, {responseType: "json"})
    .pipe(
      tap((_) => console.log('returned by service: ', JSON.stringify(_))),
      catchError(
        this.errorHandlerService.handleError<ticketModel>("fetchById", {} as ticketModel)
      )
    );
}

2. 修改component.ts的类型声明和逻辑

// component.ts 调整ticket属性类型为单个对象
ticket?: ticketModel;

// 调整ngAfterViewInit逻辑，把patchValue移到异步回调内
ngAfterViewInit(){
  if(!this.isNewMode){
    this.sub = this.dataService.getById(this.id)
    .pipe(first())
    .subscribe({
      next: ticket => {
        // 表单控件名和对象属性完全一致，可直接传对象填充
        this.Form.patchValue(ticket);
      },
    });
  }
}

方案2（无需改动后端，前端适配数组返回） #

如果后端无法修改返回格式，前端直接取数组第一个元素即可：

// component.ts 无需改动service，仅调整订阅逻辑
ngAfterViewInit(){
  if(!this.isNewMode){
    this.sub = this.dataService.getById(this.id)
    .pipe(first())
    .subscribe({
      next: ticketData => {
        // 取数组第一个元素作为填充数据
        const ticket = ticketData[0];
        this.Form.patchValue(ticket);
      },
    });
  }
}

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