Angular中subscribe赋值前返回值问题求助

你的核心问题是subscribe是异步操作：当前getMessage函数里的return仅在回调内部生效，函数本身没有返回值，调用时会直接拿到undefined；等异步请求完成拿到数据时，函数早就执行结束了。

下面给你两个适配Angular Material表格场景的可行方案：

方案一：批量处理请求后生成表格数据 #

1. 先重构getMessage，让它直接返回Observable（不要在内部做subscribe）：

getMessage(field): Observable<string> {
  return this.service.getMessage(field);
}

2. 整理原始数据与请求字段的关联关系，用forkJoin等待所有请求完成后再组装表格数据：

// 组件内定义属性替代原来的const ELEMENT_DATA
ELEMENT_DATA: PeriodicElement[] = [];

ngOnInit() {
  // 先把原始数据和需要请求的字段、附加字符串整理好
  const rawItems = [
    {position: 1, reqField: obj, attachStr: someobj.id, weight: 1.0079, symbol: 'H'},
    {position: 2, reqField: se, attachStr: yy.gt, weight: 4.0026, symbol: 'He'},
  ];

  // 收集所有请求的Observable实例
  const requestList = rawItems.map(item => this.getMessage(item.reqField));

  // 等待所有请求完成后组装数据
  forkJoin(requestList).subscribe(allMessages => {
    this.ELEMENT_DATA = rawItems.map((item, index) => ({
      position: item.position,
      name: `${allMessages[index]} ${item.attachStr}`,
      weight: item.weight,
      symbol: item.symbol
    }));
  });
}

模板中直接使用ELEMENT_DATA作为表格数据源即可，初始为空数组不会影响渲染。

方案二：响应式Observable+async管道（更符合Angular编程风格） #

1. 同样先重构getMessage返回Observable；
2. 直接生成Observable类型的数据源，模板用async管道自动处理订阅：

// 组件内定义Observable类型的数据源
ELEMENT_DATA$: Observable<PeriodicElement[]>;

ngOnInit() {
  const rawItems = [
    {position: 1, reqField: obj, attachStr: someobj.id, weight: 1.0079, symbol: 'H'},
    {position: 2, reqField: se, attachStr: yy.gt, weight: 4.0026, symbol: 'He'},
  ];

  this.ELEMENT_DATA$ = forkJoin(
    rawItems.map(item => 
      this.getMessage(item.reqField).pipe(
        map(message => ({
          position: item.position,
          name: `${message} ${item.attachStr}`,
          weight: item.weight,
          symbol: item.symbol
        }))
      )
    )
  );
}

模板中使用async管道：

<table mat-table [dataSource]="ELEMENT_DATA$ | async">
  <!-- 你的表格列定义 -->
</table>

这种方式无需手动管理订阅，Angular会自动处理订阅和销毁，避免内存泄漏。如果担心请求失败，还可以给forkJoin添加catchError管道处理异常。

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