TypeScript中subscribe取值及API数据绑定HTML组件的最佳实践

一、为什么subscribe外部访问this.markers是undefined？ #

Apollo的query是异步操作，subscribe里的回调函数会在API请求完成后才执行。如果你在调用getAllPosition()之后立刻访问this.markers，此时回调还没触发，this.markers自然还是初始的undefined。

另外你的代码存在一个小问题：在map循环内每次都给this.markers赋值，这会导致组件多次触发变更检测，效率低下，应该等所有数据处理完成后再一次性赋值。

二、代码优化（修复异步时序问题） #

调整逻辑，将this.markers的赋值移到循环外，同时用map直接生成目标数组（替代先声明空数组再push的写法）：

getAllPosition() {
  this.apollo
    .query<any>({
      query: this.tpeService.filterTpeByRegion(),
    })
    .subscribe(({ data }) => {
      // 一次性转换并生成目标数组
      const positions = data.filterTpeByRegion.map(item => ({
        lat: +item.latitude,
        lng: +item.longitude
      }));
      // 单次赋值，减少变更检测次数
      this.markers = positions;
      console.log(this.markers, "已更新的标记数据");
    });
}

三、数据绑定到HTML组件的最佳实践 #

1. 推荐：使用Angular AsyncPipe（最简洁高效） #

AsyncPipe会自动处理Observable的订阅、取消订阅，以及数据更新后的视图刷新，还能避免内存泄漏。

组件代码：

// 声明Observable类型变量，直接存储查询结果的数据流
markers$: Observable<{ lat: number, lng: number }[]>;

getAllPosition() {
  this.markers$ = this.apollo.query<any>({
    query: this.tpeService.filterTpeByRegion()
  }).pipe(
    // 在管道内完成数据转换，无需手动订阅处理
    map(({ data }) => data.filterTpeByRegion.map(item => ({
      lat: +item.latitude,
      lng: +item.longitude
    })))
  );
}

HTML模板代码：

<!-- 用async管道自动订阅，数据更新时视图自动同步 -->
<div *ngFor="let marker of markers$ | async">
  纬度: {{ marker.lat }}, 经度: {{ marker.lng }}
</div>

2. 手动订阅的注意事项 #

如果必须手动订阅（比如需要在回调里做额外业务逻辑），一定要在组件销毁时取消订阅，防止内存泄漏：

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

// 声明用于销毁订阅的Subject
private destroy$ = new Subject<void>();

getAllPosition() {
  this.apollo.query<any>({
    query: this.tpeService.filterTpeByRegion()
  }).pipe(
    takeUntil(this.destroy$), // 组件销毁时自动终止订阅
    map(({ data }) => data.filterTpeByRegion.map(item => ({
      lat: +item.latitude,
      lng: +item.longitude
    })))
  ).subscribe(positions => {
    this.markers = positions;
    // 此处可添加额外的数据处理逻辑
  });
}

// 组件销毁时触发，清理订阅
ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

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