你如何处理 Angular 中的函数顺序？

Question

所以我有一个 Angular 组件。

使用一些包含我想要使用的数据的数组对象：

  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);
        });
  }

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

在此示例中，我只想将每本书的所有总评分更改为 10：

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

我一直试图解决的问题是：

this.books是一个空数组。

我认为原因是因为此功能在数据订阅之前运行。

如果是这样，那么我对 ngOnInit 的理解一定是不对的。

我认为它会按顺序调用该函数。

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

所以我的问题是：

1. 为什么是空数组？

（我是对的吗？或者还有更多吗？）

2. Angular 开发人员如何编写函数，以便按照所需的顺序运行？

（由于数据需要存在以便我可以使用它，我该如何避免这个问题？）

(3.) 奖金问题：

（如果你有时间，请，谢谢）

我的目标是为 this.reviews.title 等于 this.books.title 的每本书提取 this.reviews.rating，得到一个平均分；然后用平均值覆盖 this.books.totalrating 的“0”占位符。我怎么能重写 setRatingToTen() 函数来完成这个？

Answer 1

这是在 rxjs 中使用forkJoin方法的解决方案之一。

您可以查看详情https://medium.com/@swarnakishore/performing-multiple-http-requests-in-angular-4-5-with-forkjoin-74f3ac166d61

工作演示：在此处输入链接描述

ngOnInit：

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

forkJoin 方法：

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);
  }