javascript - 使用 Angular Material DataTable 时 Angular 组件的 ngOnInit 中的 SetTimeOut 函数

Question

我正在检查我现有项目之一的 Angular 代码，并在下面的代码片段中找到。我们正在使用 Angular material datatable 在页面上呈现 View

export class Component implements OnInit,AfterViewInit{

  private dataSource: MatTableDataSource<Product> = null;
  @ViewChild(MatPaginator) paginator: MatPaginator; 

  columnsToDisplay = ['productId','productname'];
  constructor(private _service : DataService) { }

  ngOnInit() {

    this._service.getProducts().subscribe(
     ((data : Product[]) => this.dataSource = new MatTableDataSource(data)),
     () => console.log('THIS IS ERROR')
    );
    setTimeout(() => this.dataSource.paginator = this.paginator);
    //this.dataSource.paginator = this.paginator;
  }

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator; 
  }

}

我的问题是:

1) 由于 this.service.getData() 返回一个 Observable 并且 subscribe 将在 HttpResponse< 时被异步调用 可用， setTimeout 函数内的操作是否会仅在 subscribe 方法被调用后被调用？

2) 我已经看到 ngAfterViewInit 方法也包含与 ngOnInit 方法中的 setTimeout 方法完全相同的代码

3) 但是当这个方法被调用时 (ngAfterViewInit) ， this.products 仍然是 NULL 表明订阅还没有被调用 '

4) 这就是 setTimeout 在 ngOnInit 方法中被调用的原因吗？

5)如果是这种情况，ngAfterViewInit 方法有什么用？

Answer 1

1) 这取决于。订阅仅在操作完成时执行代码。因此，当 this.service.getData() 完成其工作时。 setTimeout 在延迟后完成这项工作。如果订阅需要的时间少于 setTimeout，它将首先执行。

2) 也许您试图注意到函数何时执行？

3) AfterViewInit 被多次触发。您可以像这样检查 if(!!something) 然后执行一些代码。

4) 您应该始终避免使用 settimeout(仅用于调试目的)。

编辑:

ngOnInit() {

this._service.getProducts().subscribe(
 ((data : Product[]) => this.dataSource = new MatTableDataSource(data)),
 () => console.log('THIS IS ERROR')
);
setTimeout(() => this.dataSource.paginator = this.paginator);
//this.dataSource.paginator = this.paginator;

}`

让我们稍微简化一下这段代码:

ngOnInit() {
  this.service.doStuff()
  .subscribe(result => {
    this.functionA();
  },
  err => {
    //Do other stuff in case of an error
  });

  this.functionB();
}

functionA(){
  console.log("Hello,");
}

functionB(){
  console.log("world!");
}

这段代码的输出将是:

世界!你好，

但为什么呢？

那是因为 observable 模式。

您可以想象当您与两个人同行时:一个懂英语，一个不懂英语。所以即使你说“你好吗？”首先是对不懂英语的人，他需要时间来理解你说什么并回答你。同时，另一个人(非常懂英语)立即回答你。

functionA和functionB的例子是一样的。 FunctionA 仅在订阅捕获到某些内容时执行。这就是为什么它不首先被解雇的原因。你可以看到在这里放置了一个调试点:

ngOnInit() {
      this.service.doStuff()
      .subscribe(result => {
      --->  this.functionA();
      },
      err => {
        //Do other stuff in case of an error
      });

      --->  this.functionB();
    }

希望对此有很好的解释。

现在让我们继续，让我们使用超时:

 ngOnInit() {
          this.service.doStuff()
          .subscribe(result => {
            this.functionA();
          },
          err => {
            //Do other stuff in case of an error
          });

          settimeout(() => {
            this.functionB();
          }, 500);
        }

哪个函数会先执行？

剧透:你不可能知道的。

如果您想知道为什么，这很简单:您确切知道函数 B 将在 500 毫秒后调用，但您无法知道需要多少时间使用订阅才能准备就绪。所以如果你运气好，你的订阅通常需要大约 500 毫秒才能完成，你可以尝试重新加载页面几次，有时你会看到 Hello, world!，有时你会看到 world !你好，。

以更好的方式回答您的问题:我真的不知道您为什么要这样放置代码，根本不知道。

ngAfterViewInit 是一个生命周期，在 ngOnInit 之后调用，并在 Angular 完全初始化组件 View 后执行逻辑。