Angular中如何等待异步操作完成后执行指定循环？

兄弟，你现在遇到的是典型的异步操作未完成就执行同步逻辑的问题！你的for循环在ngOnInit里直接同步执行了，但此时this.userService.query()和this.principal.identity()这两个异步请求还没返回结果，this.users和this.currentAccount根本还没拿到值，循环自然找不到对应的用户ID。

下面给你两种符合Angular最佳实践的解决方案：

方案一：用Promise.all（适合习惯Promise语法的场景） #

把Observable转成Promise，等待两个异步操作都完成后再执行逻辑：

ngOnInit() {
  // 将用户查询的Observable转为Promise，只取第一个响应就完成
  const usersPromise = this.userService.query()
    .pipe(first())
    .toPromise()
    .then((res: HttpResponse<User[]>) => {
      this.users = res.body;
      return res.body;
    })
    .catch((res: HttpErrorResponse) => {
      this.onError(res.message);
      throw res; // 抛出错误让Promise.all统一处理
    });

  // 账户信息的Promise直接复用
  const accountPromise = this.principal.identity()
    .then((account) => {
      this.currentAccount = account;
      return account;
    });

  // 等待两个异步操作全部完成
  Promise.all([usersPromise, accountPromise])
    .then(([users, account]) => {
      // 这里users和account肯定都有值了
      for (const user of users) {
        if (user.login === account.login) {
          this.currentUserId = user.id;
          break; // 找到后跳出循环，提升效率
        }
      }
    })
    .catch(err => {
      console.error('获取数据出错:', err);
    });
}

方案二：用RxJS组合操作符（更贴合Angular的RxJS生态） #

把Promise转为Observable，用forkJoin组合两个异步流，等都返回结果后处理：

import { forkJoin, from } from 'rxjs';
import { first, map, catchError } from 'rxjs/operators';

ngOnInit() {
  // 处理用户查询的Observable
  const users$ = this.userService.query()
    .pipe(
      first(),
      map((res: HttpResponse<User[]>) => res.body),
      catchError((res: HttpErrorResponse) => {
        this.onError(res.message);
        throw res;
      })
    );

  // 将账户信息的Promise转为Observable
  const account$ = from(this.principal.identity());

  // 组合两个流，等待全部完成后执行逻辑
  forkJoin([users$, account$])
    .subscribe(([users, account]) => {
      this.users = users;
      this.currentAccount = account;
      // 用Array.find替代for循环，更简洁
      const matchedUser = users.find(user => user.login === account.login);
      if (matchedUser) {
        this.currentUserId = matchedUser.id;
      }
    }, err => {
      console.error('出错了:', err);
    });
}

额外优化小技巧 #

用Array.find()替代手动写for循环，代码更简洁易读，而且找到匹配项后会自动停止遍历，效率更高~

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