如何修复 angular7 中的 TypeError答案

【问题标题】：How to fix TypeError in angular7如何修复 angular7 中的 TypeError
【发布时间】：2019-10-23 17:43:47
【问题描述】：

我在尝试检索类型时遇到问题

那是类：

book: Book;

[...]

getBooksDetails(id) {
    this.api.getBook(id)
      .subscribe(data => {
        this.book = data;
        console.log(this.book);
        this.isLoadingResults = false;
        this.getBooksReviews(this.book.BookTitulo);
      });
  }

[...]

ngOnInit() {

    console.log(this.route.snapshot.params.id);
    this.getBooksDetails(this.route.snapshot.params.id);

    console.log(this.currentUser.username);
    console.log(this.book.BookTitulo);

    this.reviewForm = this.formBuilder.group({
      body : [null, Validators.required],
      rating : [null, Validators.required]
    });
  }

在这行之前一切都很好：

console.log(this.book.BookTitulo);

我在哪里收到此错误：ERROR TypeError: Cannot read property 'BookTitulo' of undefined

我认为我在方法中正确地将结果分配给了 book 对象，请帮助并感谢您的阅读。

【问题讨论】：

您正在使用console.log(this.book.BookTitulo);，它甚至会在您的 observable 发出值之前执行。由于这个原因，this.book 可能没有价值。

标签： angular typeerror

【解决方案1】：

OnInit 同步发生，而订阅不是同步的。因此，它会查询数据并在其他所有事情发生时等待。当它发生时，它会进入命令队列。

OnInit 是同步的，因此当订阅等待响应时，console.log 会发生，并且 this.book 是未定义的。

如果您在订阅中添加 console.log，您将看到答案。订阅完成后必须发生的任何逻辑都必须进入订阅的响应中。

【讨论】：

【解决方案2】：

使用promise从方法getBooksDetails返回数据，参考下面代码

getBooksDetails(id) {
    return new Promise((res, rej) => {
    this.api.getBook(id)
      .subscribe(data => {
        res(data);
        this.book = data;
        console.log(this.book);
        this.isLoadingResults = false;
        this.getBooksReviews(this.book.BookTitulo);
      });

})  }


ngOnInit() {


    this.getBooksDetails(this.route.snapshot.params.id).then(data => {
       this.book = data;
       console.log(this.book.BookTitulo);
    });

  }

这可能会帮助您解决问题，如果我错了，请告诉我

【讨论】：