0

我有一个连接到 firebase 数据库并下载所有项目的应用程序，然后这些项目显示在如下表格中：

在此处输入图像描述 此表仅在我登录时显示，但一旦我移动到另一个组件并返回到带有表的组件，数据就不再加载。

我认为那是因为我在 onInit() 函数中有以下代码：

  ngOnInit() {
    this.taskService.getTasks().subscribe(tasks => {
      this.tasks = tasks;
    });
  }

基本上只是读取数据并将其添加到数组中。然后如果数组长度> 0，则数据将显示在表格中：

<div *ngIf="tasks?.length > 0;else noTasks">
</div>

我试图通过使用来解决这个问题

  ngOnChanges() {
    this.taskService.getTasks().subscribe(tasks => {
      this.tasks = tasks;
    });
  }

但没有任何改变。所以..有没有办法在每次加载组件时调用函数，或者我的问题与另一件事有关？

4

3 回答 3

0

由于我的评论为您提供了解决方案，因此我将详细说明答案。

所有继承 Observable 的类（Subject、BehaviourSubject、ReplaySubject 和 Observable 本身）本质上是一个您订阅的流，它会记住您的回调，直到您取消订阅。

因此，最终取消订阅任何订阅非常重要。

除非：一些 Observable 是从内部关闭的。例如所有 HttpClient 动词。（获取，发布，放置..）

至少有三种方法可以跟踪您的组件订阅，对于一两个订阅，最简单的方法是将它们保存在一个变量中，您可以在适当的时候取消订阅。

  //Variable to keep track of the subscription
  taskSubscription: Subscription;

  //Creating the subscription
  ngOnInit(){
    this.taskSubscription = this.taskService.getTasks()
        .subscribe(tasks => this.tasks);
  }

  //Calling unsubscribe on the subscription variable when the component is destroyed
  ngOnDestroy(){
    this.taskSubscription.unsubscribe();
  }
于 2018-03-12T18:25:18.660 回答
0

正如@jornara 指出的那样，我应该在 ngOnDestroy() 中使用 unsubcribe() ，如下所示：

  //Variable to keep track of the subscription
  sub: any;

  //Calling the subscription
  ngOnInit(){
    this.sub = this.taskService.getTasks().subscribe(tasks => {
      this.tasks = tasks;
    });
  }

  //Calling unsubscribe on the initial variable
  ngOnDestroy(){
    this.sub.unsubscribe();
  }
于 2018-03-11T22:29:29.323 回答
-1

好的，在查看所有事件之后，我认为您会使用此事件ngAfterViewChecked。这样，您可以在每次检查视图时执行您的函数。此外，ngOnInit仅在应用程序加载时工作一次，之后将不再执行。使用ngAfterViewChecked. 再次，请查看我给您的链接！

ngAfterViewChecked() { 
this.taskService.getTasks().subscribe(tasks => {
      this.tasks = tasks;
    });
}
于 2018-03-11T18:44:47.673 回答