Angular中数组Observable需调用两次才正常工作的问题排查

初始问题 #

我是Angular新手，现有一个按钮函数，订阅Observable并将返回数据存入数组。首次点击调用时数组为空，再次点击才会正确填充数据，尝试取消订阅Observable也未解决问题。

相关代码：

userList: UserRm[] = []

assignUser() {  

  if (this.form.invalid)
    return;

  this.userProjectService.findUserProject({ projectId: this.projectId ?? '' })
    .subscribe(response => { this.userList = response; console.log(this.userList) }, this.handleError);

  if (this.userList.length == 0) {
    this.openDialog("already-assigned", <any>this.form.value.email);
    //this.alreadyAssignedError = true;
    console.log("userlist = 0, User is already assigned to project.");
  }
 else {
    //else logic. 
   //this only gets triggered after pushing the button twice
}

问题点：在if (this.userList.length == 0)判断处，即便userList应存在数据，首次点击时仍为空，再次点击才会正确填充。

更新后的问题 #

调整代码后结果仍不符合预期：首次点击时userList能正确填充并得到正确结果，但再次点击时，userList不会随新的API调用更新，保持不变。之前是先出现错误提示再成功，现在是两次成功，第三次点击时userList才正确更新并出现预期的错误提示。

调整后的代码：
将订阅调用移至单独函数：

getId(value: any) {
    this.projectId = value;
    console.log(this.projectId);

    this.userProjectService.findUserProject({ projectId: this.projectId ?? '' })
      .subscribe(response => { this.userList = response; console.log(this.userList) }, this.handleError);
  }

在assignUsers函数中调用该函数：

this.getId(this.projectId);

问题根源 #

Observable的订阅是异步操作，API请求发送后，代码会立刻继续执行后续的if (this.userList.length == 0)判断，此时API还未返回数据，userList仍是初始空数组，所以首次点击会进入错误分支。第二次点击时，上一次的API请求已返回并赋值userList，判断逻辑才会生效。

更新后的代码只是把订阅移到了单独函数，但本质还是异步时机问题：调用getId后，代码立刻执行后续逻辑，新的API请求还未返回，userList仍保留之前的值，导致第二次点击用的是第一次的结果。

解决方法 #

把依赖userList的判断逻辑放到订阅的回调函数内部，确保只有API返回数据后才执行判断：

修正初始代码写法 #

userList: UserRm[] = []

assignUser() {  
  if (this.form.invalid)
    return;

  this.userProjectService.findUserProject({ projectId: this.projectId ?? '' })
    .subscribe({
      next: (response) => {
        this.userList = response;
        console.log(this.userList);
        // 把判断逻辑移到这里，确保数据已更新
        if (this.userList.length == 0) {
          this.openDialog("already-assigned", <any>this.form.value.email);
          console.log("userlist = 0, User is already assigned to project.");
        } else {
          // else logic. 现在会在数据返回后立刻执行
        }
      },
      error: this.handleError
    });
}

修正更新后的代码 #

如果要保留getId函数，可让它返回Observable，再在assignUsers中订阅并处理逻辑：

getId(value: any): Observable<UserRm[]> {
    this.projectId = value;
    console.log(this.projectId);

    return this.userProjectService.findUserProject({ projectId: this.projectId ?? '' });
  }

// 在assignUsers中调用
assignUsers() {
  // ...其他逻辑
  this.getId(this.projectId).subscribe({
    next: (response) => {
      this.userList = response;
      console.log(this.userList);
      // 这里处理判断逻辑
      if (this.userList.length == 0) {
        this.openDialog("already-assigned", <any>this.form.value.email);
        console.log("userlist = 0, User is already assigned to project.");
      } else {
        // else logic
      }
    },
    error: this.handleError
  });
}

额外建议 #

• 为避免内存泄漏，建议使用async管道或手动管理订阅（比如takeUntil操作符），不要直接订阅后放任不管。
• 尽量避免依赖全局变量传递API返回值，直接在回调中处理逻辑更可靠。

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