时间戳

首页 > 解决方案 > 我想在 ngOnInit() { } 的第二个方法中使用 .subscribe 的结果

angular - 我想在 ngOnInit() { } 的第二个方法中使用 .subscribe 的结果

问题描述

我有一个使用服务来获取书籍列表的方法，我需要第二种方法，它使用书籍列表通过 id 过滤来获取一本书。这两个方法在同一个组件的“ngOnInit”中调用。我得到的是第二种方法在得到结果之前使用书籍列表。

我通过在 .subscribe 的结果中调用第一个方法中的第二个方法，然后在 ngOnInit 中仅调用第一个方法来解决此问题。我没有找到非常令人满意的解决方案，我想要一种更通用和更有条理的方式......

export class BookComponent implements OnInit {
  public books: Book[];
  public book: Book;
  public id;
  public sub;

  constructor(private activatedRoute: ActivatedRoute, private router: Router, private bookService: BookService) {}
  getBooks() {
    this.bookService.getBooks().subscribe(
      result => {
        this.books = result;
      }
    );
  }

  findById() {
    this.sub = this.activatedRoute.paramMap.subscribe(params => {
      console.log(params);
      this.id = params.get('id');
      this.book = this.books.find(a => a.id == this.id);
    });
  }


  ngOnInit() {
    this.getbooks();
    this.findById();
  }
}

这是我得到的错误：

 ERROR TypeError: Cannot read property 'find' of undefined

标签： angularobservablesubscribengoninit

解决方案

尝试这个

findById() {
this.sub = this.activatedRoute.paramMap.subscribe(params => {
  console.log(params);
  this.id = params.get('id');
  this.book = this.books.find(a => a.id == this.id);
});
}


ngOnInit() {
  this.books = [];
  this.getbooks();
  this.findById();
}

推荐阅读