Angular中如何在Observable订阅获取值后执行条件判断？

1. 修改后的写法是正确的 #

把判断逻辑放到respPIN的订阅回调里、循环之后，能确保：

• 只有当GetPInternalNotes的异步请求完成，数组internalNotes被完全填充后，才会执行条件判断
• 避免了原代码中ngOnInit里IF语句在异步请求未完成时就执行的问题（原代码的IF是同步执行，此时数组还没有数据）

不过当前写法还有可以优化的地方：

2. 优化建议 #

（1）避免嵌套订阅，用RxJS操作符简化逻辑

嵌套订阅会让代码可读性变差，还容易出现内存泄漏风险，推荐用switchMap串联两个异步请求：

import { switchMap } from 'rxjs/operators';

public getV(vId: number) {
  this.vs.V(vId).pipe(
    switchMap(resp => this.ps.GetPInternalNotes(resp.PID.toString()))
  ).subscribe(respPIN => {
    // 直接替换数组，比循环push更高效
    this.internalNotes = [...respPIN];
    if (this.internalNotes.length > 0) {
      this.dialog.open(DialogInternalNotesThreeComponent, {
        data: {
          data: this.internalNotes
        }
      });
    }
  });
}

（2）优化数组赋值逻辑

原循环逐个push元素的写法可以简化为扩展赋值，效率更高且代码更简洁：

// 直接替换数组（清空旧数据，替换为新数据）
this.internalNotes = [...respPIN];

// 如果需要保留原数组的旧数据，再用批量push：
// this.internalNotes.push(...respPIN);

（3）添加订阅管理，避免内存泄漏

如果组件可能在请求完成前被销毁，建议用Subscription管理订阅，在组件销毁时取消订阅：

import { Subscription } from 'rxjs';

private subscription: Subscription = new Subscription();

ngOnInit() {
  this.subscription.add(this.getV(vId));
}

ngOnDestroy() {
  this.subscription.unsubscribe();
}

public getV(vId: number) {
  return this.vs.V(vId).pipe(
    switchMap(resp => this.ps.GetPInternalNotes(resp.PID.toString()))
  ).subscribe(respPIN => {
    this.internalNotes = [...respPIN];
    if (this.internalNotes.length > 0) {
      this.dialog.open(DialogInternalNotesThreeComponent, {
        data: {
          data: this.internalNotes
        }
      });
    }
  });
}

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