0

我有这个 ngAfterViewInit 生命周期钩子：

ngAfterViewInit() {
    this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);

    this.subscription = this.dataService.dataChanged
      .subscribe(
        () => {
          this.getData();
        }
      );

    this.getData();
  }

我希望订阅在订阅之外的那个之前运行this.getData()，并且只有在没有发生的情况下，我希望this.getData()订阅之外的那个运行。

我怎样才能做到这一点？将它放在 ngOnInit 中不起作用，因为这是一个分页表，并且仅在呈现页面后才起作用。当用户向表中添加新数据并且我希望它自动可见时，我需要订阅。

编辑 如果我像上面写的那样运行代码，那么当第一次导航到页面时，我的数据会正确地从服务器加载到我的分页表中。然后，用户可以使用另一个组件中的表单添加新的数据项。当用户完成添加新项目时，他们将导航回此表。现在看起来，表格首先在没有新增内容的情况下加载，然后重新加载新增内容。我想要发生的是第一次加载对用户不可见 - 这样当他们被导航回来时，他们会立即看到正确的数据。

4

1 回答 1

1

您需要更改代码流，因为订阅是异步的。

 private callGetData: boolean

 ngAfterViewInit() {

    this.callGetData = true;

    this.sort.sortChange.subscribe(() => {
       this.paginator.pageIndex = 0;
       if(this.callGetData) this.getData();
       this.callGetData = false;
    })

    this.subscription = this.dataService.dataChanged
      .subscribe(
        () => {
          this.getData();
        }
      );
  }

这样，您将getData()仅在ngAfterViewInit()执行后调用，而不是每次订阅接收事件时调用。

或者，如果您也想getData()在订阅中删除该标志。

希望它有效！

于 2020-08-16T19:35:01.003 回答