Angular 2+中如何判断Observable的数据已准备就绪可使用？

嘿，我看你在写Angular应用的时候遇到了两个关键问题：一是isAdded函数的逻辑有bug，二是异步加载的sessionStudents可能还没准备好就被调用。咱们一步步来解决～

1. 修复isAdded函数的逻辑错误 #

你原来用forEach遍历数组的时候，回调里的return true只会跳出当前的循环迭代，不会让整个isAdded函数返回true，所以不管有没有找到匹配的studentId，最后都会走到函数末尾的return false（我猜你这里没写完的部分是return false）。

更合适的做法是用数组的some()方法，它专门用来检测数组中是否存在满足条件的元素，找到匹配项后会立即返回true，效率更高也更简洁：

isAdded(studentId: string): boolean {
  // 先判断sessionStudents是否已初始化，避免空指针报错
  if (!this.sessionStudents) {
    return false;
  }
  // 使用some方法直接返回是否存在匹配的studentId
  return this.sessionStudents.some(student => student._id === studentId);
}

2. 处理异步加载的变量问题 #

因为getStudentsBySession是异步HTTP请求，sessionStudents一开始是undefined或者空数组，如果在请求完成前调用isAdded，要么得到错误的结果，要么会触发空指针错误。这里有几种处理方式：

方式一：模板中确保数据加载完成后再渲染 #

如果是在模板里调用isAdded，可以用*ngIf先判断sessionStudents是否存在，确保数据加载完成后再执行相关逻辑：

<!-- 只有当sessionStudents加载完成后，才渲染下面的内容 -->
<div *ngIf="sessionStudents">
  <span *ngFor="let student of allStudents">
    {{ student.name }}: {{ isAdded(student._id) ? '已添加' : '未添加' }}
  </span>
</div>

方式二：组件逻辑中等待异步请求完成后再调用isAdded #

如果是在组件内部的逻辑里调用isAdded，一定要确保在subscribe的回调之后再执行，也就是等sessionStudents被赋值完成：

getStudentsBySessionId() { 
  this.sessionService
    .getStudentsBySession(this._sessionId)
    .subscribe(students => { 
      this.sessionStudents = students; 
      this.reInitDatatable(); 
      // 这里可以安全调用isAdded
      const isStudentAdded = this.isAdded('某个studentId');
      console.log(isStudentAdded);
    }); 
}

这样就能避免因为异步加载导致的变量未初始化问题啦～

内容的提问来源于stack exchange，提问作者Pham Nguyen Binh