Javascript 如何处理角函数的顺序？

所以我有一个角度分量

对于包含我要处理的数据的某些数组对象：

  books: Book[] = [];
  reviews: Review[] = [];

这就是我的ngOnInit的样子：

  ngOnInit(): void {
    this.retrieveBooks();
    this.retrieveReviews();
    this.setRatingToTen();
  }

有了这些，我就可以写书，并复习对象数组。 这是通过通过服务订阅数据完成的：

  retrieveBooks(): void {
    this.bookService.getAll()
      .subscribe(
        data => {
          this.books = data;
        },
        error => {
          console.log(error);
        }
      );
  }

  retrieveReviews(): void {
    this.reviewService.getAll()
      .subscribe(
        data => {
          this.reviews = data;
        },
        error => {
          console.log(error);
        });
  }

所以我的下一个函数只是处理数据的一个例子

在本例中，我只想将每本书的totalratings更改为10：

  setRatingToTen(): void {
    this.books.forEach(element => {
      element.totalrating = 10;
    });
    console.log(this.books);
  }

我一直想解决的问题是：

这是一个空数组

我想原因是因为这个函数是在数据订阅之前运行的

如果是这样，那么我对恩戈尼特的理解肯定是不对的

我想它会按顺序调用函数

也许情况仍然如此，只是他们没有按顺序完成

因此，我的问题是：

一,。为什么它是一个空数组

我说得对吗？还是还有更多

二,。Angular开发人员如何编写函数以便按所需顺序操作

因为数据需要在那里，所以我可以使用它，我如何避免这个问题

三,。奖金问题：

如果你有时间的话，谢谢你

---

我的目标是对每本书进行this.reviews.rating，其中this.reviews.title等于this.books.title，得到平均分；然后用平均值覆盖this.books.totalrating的0占位符。我如何重新编写setRatingToTen函数来实现这一点？

下面是在rxjs中使用forkJoin方法的一个解决方案

您可以查看此以了解详细信息

工作演示：

恩戈尼特：

forkJoin方法：

---

下面是在rxjs中使用forkJoin方法的一个解决方案

您可以查看此以了解详细信息

工作演示：

恩戈尼特：

forkJoin方法：

---

Angular大量使用可观测数据来处理各种异步操作。通过HTTP发出服务器端请求就是其中之一

你的前两个问题清楚地反映出你忽略了可观察事物的异步性

可观察对象是多个值的延迟推送集合

意味着可观察到的响应将以异步方式随时间推移而推送。您无法保证两个不同的函数中的哪一个会首先返回其响应

话虽如此，rxjs库可观测值也是这个库的一部分，从这里借用它们提供了一个丰富的操作符集合，您可以使用它来操作可观测值

根据以上解释，以下是对您的问题的逐一回答

一,。为什么它是一个空数组

因为您考虑的是同步的顺序代码流，其中一个方法只有在另一个方法完成其工作后才会被调用。但在这里，retrieveBooks和RetrieveView都在进行异步可观察调用，然后订阅它。这意味着无法保证何时收到他们的答复。同时，对setRatingToTen的命中已经完成，此时books数组是空的

二,。Angular开发人员如何编写函数以便按所需顺序操作

Angular developer将理解异步可观察调用的性质，并将按顺序对操作符进行管道化处理，以便在对可观察流执行任何进一步操作之前确保它们手头有响应

三,。奖金问题：

您的需求规定，在执行任何操作之前，您必须首先获得两个可观察对象的响应。因此，forkJoin rxjs操作符适合您的需要。该操作员的文档说明

这方面的一个常见用例是，如果您希望在页面加载或其他事件上发出多个请求，并且只希望在收到所有请求的响应时才采取操作

不确定你的平均分数策略，但这里有一个示例代码，说明你将如何实现你的目标

恩戈尼特{ 让req1$=this.bookService.getAll； 让req2$=this.reviewService.getAll； forkJoinreq1$，req2$。订阅[response1，response2]=>{ forlet book of response1//首先遍历book数组 { forlet响应评审2//评审内部循环 { ifbook.title==review.title { //在这里完成你的逻辑。。 } } } };

---

} Angular大量使用可观测数据来处理各种异步操作。通过HTTP发出服务器端请求就是其中之一

你的前两个问题清楚地反映出你忽略了可观察事物的异步性

可观察对象是多个值的延迟推送集合

意味着可观察到的响应将以异步方式随时间推移而推送。您无法保证两个不同的函数中的哪一个会首先返回其响应

话虽如此，rxjs库观测值也是该库的一部分，从这里借来的rxjs库观测值提供了丰富的集合 可以用来操纵观测值的运算符的集合

根据以上解释，以下是对您的问题的逐一回答

一,。为什么它是一个空数组

因为您考虑的是同步的顺序代码流，其中一个方法只有在另一个方法完成其工作后才会被调用。但在这里，retrieveBooks和RetrieveView都在进行异步可观察调用，然后订阅它。这意味着无法保证何时收到他们的答复。同时，对setRatingToTen的命中已经完成，此时books数组是空的

二,。Angular开发人员如何编写函数以便按所需顺序操作

Angular developer将理解异步可观察调用的性质，并将按顺序对操作符进行管道化处理，以便在对可观察流执行任何进一步操作之前确保它们手头有响应

三,。奖金问题：

您的需求规定，在执行任何操作之前，您必须首先获得两个可观察对象的响应。因此，forkJoin rxjs操作符适合您的需要。该操作员的文档说明

这方面的一个常见用例是，如果您希望在页面加载或其他事件上发出多个请求，并且只希望在收到所有请求的响应时才采取操作

不确定你的平均分数策略，但这里有一个示例代码，说明你将如何实现你的目标

恩戈尼特{ 让req1$=this.bookService.getAll； 让req2$=this.reviewService.getAll； forkJoinreq1$，req2$。订阅[response1，response2]=>{ forlet book of response1//首先遍历book数组 { forlet响应评审2//评审内部循环 { ifbook.title==review.title { //在这里完成你的逻辑。。 } } } };

---

}this.requestDataFromMultipleSources.subscriberesList=>{在这一行，我收到了错误消息：您在预期流的位置提供了“undefined”。您可以提供可观察、承诺、数组或Iterable。我希望您不会错过导入forkJoin导入{forkJoin}从rxjs；不，它在那里。我唯一更改的是this.setratingtothis.games，this.reviews，因为逗号是一个句号，我认为这是一个明显的打字错误。你能帮我分享ion codesandbox或stackblitz的工作代码吗？好的，查看一下，看看为什么我的不工作。这和我的工作有什么关系吗服务返回Review[]和Book[]对象而不是json？this.requestDataFromMultipleSources.subscriberesList=>{在这一行，我收到错误消息：您在预期流的位置提供了“undefined”。您可以提供可观察、承诺、数组或Iterable。我希望您不会错过导入forkJoin导入{forkJoin}从rxjs；不，它在那里。我唯一更改的是this.setratingtothis.games，this.reviews，因为逗号是一个句号，我认为这是一个明显的打字错误。你能帮我分享ion codesandbox或stackblitz的工作代码吗？好的，查看一下，看看为什么我的不工作。这和我的工作有什么关系吗服务返回Review[]和Book[]对象而不是json？

ngOnInit(){
    this.requestDataFromMultipleSources().subscribe(resList => {
        this.books = resList[0];
        this.reviews = resList[1];
        this.setRatingToTen(this.books,this.reviews);
    })
}

public requestDataFromMultipleSources(): Observable<any[]> {
    let response1 = this.retrieveBooks();
    let response2 = this.retrieveReviews();
    // Observable.forkJoin (RxJS 5) changes to just forkJoin() in RxJS 6
    return forkJoin([response1, response2]);
  }

retrieveBooks(): void {
    this.bookService.getAll()
      .subscribe(
        data => {
          this.books = data;
        },
        error => {
          console.log(error);
        }
      );
  }

  retrieveReviews(): void {
    this.reviewService.getAll()
      .subscribe(
        data => {
          this.reviews = data;
        },
        error => {
          console.log(error);
        });
  }
  
  setRatingToTen(books, reviews): void {
    this.books.forEach(element => {
      element.totalrating = 10;
    });
    console.log(this.books);
  }