使用Observable+NgFor+Async Pipe时出现onDestroy读取错误

结合你的代码和报错信息，这个错误通常和NgRx状态初始化不完整、异步订阅冲突或nz-menu与*ngFor的变更检测问题有关，以下是针对性的解决方案：

1. 确保NgRx初始状态的完整性 #

你的getJobState返回的状态切片，初始值必须保证data是一个空数组，而非undefined或null。在状态reducer里定义初始状态：

const initialState = {
  data: [], // 必须初始化为空数组
  totalCount: 0,
  // 其他状态字段...
};

这样即使请求未完成，jobs.data始终是数组，*ngFor遍历不会因值为undefined抛出错误。

2. 避免手动订阅与async管道混用 #

你在TS代码里手动订阅了jobs$，同时在HTML里用async管道再次订阅，会导致重复订阅，引发状态时序问题和变更检测冲突。用tap操作符替代手动订阅处理副作用：

loadJob() {
  const query = { pageNo: this.pageNo, title: this.searchParam.title, location: this.searchParam.location, industry: this.searchParam.industry };
  this.store.dispatch(InitJobComponent({ query }));
  this.jobs$ = this.store.pipe(
    select(getJobState),
    tap(jobs => {
      if (jobs?.data?.length) {
        this.currentJob = jobs.data[0];
        this.checkSaveStatus(this.currentJob);
        this.trustedUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.currentJob.file);
      }
    })
  );
}

3. 给*ngFor添加trackBy函数 #

nz-menu的nz-menu-item在*ngFor循环时，缺少唯一标识会导致Angular频繁销毁重建DOM节点，触发onDestroy相关错误。添加trackBy函数优化：

TS代码增加trackBy方法： #

trackJobById(index: number, job: any): number {
  return job.id; // 替换为你的职位对象唯一标识字段，比如id、jobId等
}

HTML修改*ngFor： #

<li nz-menu-item *ngFor="let job of jobs.data; let i=index; trackBy: trackJobById" (click)="details(job);">
  <!-- 职位内容展示 -->
</li>

4. 额外的空值保护（可选） #

在HTML里给jobs.data添加空值兜底，确保遍历的始终是数组：

<li nz-menu-item *ngFor="let job of jobs.data || []; let i=index; trackBy: trackJobById" (click)="details(job);">

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