Typescript中如何将Observable返回值转换为Operacao类的对象数组

解决方案 #

RxJS 中的 Observable 是异步数据流类型，你不能直接同步获取它内部发射的值，需要通过以下三种常用方式拿到 Operacao[] 数组：

1. 手动订阅（最通用方案）

调用接口方法后通过 subscribe 监听异步返回结果，回调函数的入参就是你需要的 Operacao[] 类型数组：

// 组件/调用方代码
operacaoList: Operacao[] = [];

getOperacoesList() {
  this.yourService.obterOperacoes().subscribe({
    next: (res: Operacao[]) => {
      this.operacaoList = res;
      // 拿到数组后你要执行的逻辑都写在这里或者调用对应方法
      this.doSomethingWithList();
    },
    error: (err) => {
      // 处理请求报错逻辑
    }
  })
}

注意：不要尝试在subscribe外同步读取operacaoList的值，HTTP请求是异步的，subscribe执行完的瞬间值还没返回，会拿到空数组/undefined。

2. 模板中直接使用 async 管道（仅用于视图渲染场景）

如果这个数组只需要展示在模板里，不需要在业务逻辑里操作，可以直接把 Observable 存到变量里，用 Angular 内置的 async 管道自动完成订阅、取值、销毁逻辑：

// 组件代码
operacoes$: Observable<Operacao[]>;

ngOnInit() {
  this.operacoes$ = this.yourService.obterOperacoes();
}

<!-- 模板代码 -->
<ul>
  <li *ngFor="let operacao of operacoes$ | async">
    {{ operacao.对应属性名 }}
  </li>
</ul>

这个方案不用手动处理订阅销毁，能避免内存泄漏，是纯视图展示场景下的推荐写法。

3. 转 Promise 用 async/await 语法（适合习惯异步同步化写法的场景）

如果你需要用 async/await 的写法写异步逻辑，可以用 RxJS 提供的 lastValueFrom 方法把 Observable 转成 Promise：

import { lastValueFrom } from 'rxjs';

// 调用方法
async getOperacoesList() {
  try {
    const operacaoList: Operacao[] = await lastValueFrom(this.yourService.obterOperacoes());
    // 这里拿到的operacaoList就是你需要的数组
    console.log(operacaoList);
  } catch (err) {
    // 处理报错逻辑
  }
}

注意：lastValueFrom 是 RxJS 7+ 提供的API，如果你用的是更早的RxJS版本，可以用toPromise方法，不过toPromise已经被标记为废弃，更推荐升级后用lastValueFrom。

你调试时看到的是 Observable 实例本身的结构，不是内部发射的值，只有当你订阅（或者async管道/lastValueFrom隐式订阅）之后，才会触发HTTP请求，拿到后端返回的Operacao[]数组。

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