函数在计划角之前运行答案

【问题标题】：Function runs before of schedule angular函数在计划角之前运行
【发布时间】：2021-04-29 13:44:47
【问题描述】：

我有一个 Angular 组件，它在 init 中执行 2 个函数，其中一个为数组充电，第二个获取数组的值并执行服务。

问题是第二个函数在第一个函数之前执行，所以数组不充电，第二个函数返回错误。

这是代码：

import { fromEvent, Subscription } from 'rxjs';
  ngOnInit(): void {
            this.getProducts();
            this.getLoans();
        }

getProducts() {
        this.clientService.getClientProducts(this.clientId).subscribe(
            (res) => {
                if (res.success) {
                    this.products = res.data;
                    console.log('Obtiene productos');
                    console.log(this.products);
                } 
            }
        );
    }


    getLoans() {
        console.log('Obtiene loans');
        console.log(this.products);
        this.products.forEach((element) => {
            if (element.id == '4') {
                this.clientService.getClientLoan(this.clientId).subscribe(
                    (res) => {
                        if (res.success) {
                            this.loans.push(res.data);
                        } else {
                            this.hasErrorOnLoans = true;
                        }
                    },
                );
            }
        });
    }

还有控制台日志，能不能看到之前第一个函数执行的日志：

console log

对不起我的英语！谢谢。

【问题讨论】：

这能回答你的问题吗？ How do I return the response from an Observable/http/async call in angular?
我建议当第一个方法在订阅回调中收到响应时调用第二个方法
需要在getProducts订阅中调用getLoans，对异步编程稍作研究。

标签： angular typescript rxjs

【解决方案1】：

问题是你没有同步两个异步调用。您可以做的最简单的事情是在第一个获取数据时调用第二个函数，以这种方式

getProducts() {
        this.clientService.getClientProducts(this.clientId).subscribe(
            (res) => {
                if (res.success) {
                    this.products = res.data;
                    this.getLoans();
                } 
            }
        );
    }

这样当你调用getLoans()函数时products数组就被填满了。

【讨论】：

是的，用解决方案解决这个问题！。无论如何我需要阅读一些关于异步编程的东西
是的，当您在 Angular 2 中进行 api 调用时，它是一个异步调用。无论如何，如果我的答案有用，请将其标记为已接受的答案或将其标记为有用。谢谢

【解决方案2】：

希望下面的 sn-p 有所帮助

import { fromEvent, Subscription } from 'rxjs';
import { map } from 'rxjs/operators';

 ngOnInit(): void {
        getProducts().pipe(
        map(products => products.filter(p => p.id == '4')),
        tap(filteredProducts => {
          getLoans(filteredProducts)
        })
         ).subscribe();
    }

getProducts(): Observable<ClientProduct> {
      return this.clientService.getClientProducts(this.clientId);
}


getLoans(filteredProducts) {
    filteredProducts.forEach((element) => {
      this.clientService.getClientLoan(this.clientId).subscribe((res) => {
          if (res.success) {
              this.loans.push(res.data);
          } else {
              this.hasErrorOnLoans = true;
          }
      });
  });
}

【讨论】：

【解决方案3】：

我认为您正在寻找如下解决方案。

解决方案 1

async ngOnInit() {
  await this.firstFunction();
  await this.secondFunction();
}

解决方案 2

只需使用switchMap 运算符或 Observable 之类的东西。

【讨论】：