Angular是一个客户端应用程序开发框架，它本身支持httpClient从后台获取数据。

Angular Material是一个基于Angular的组件，支持Table、分页等功能。

分页除了在服务器端直接分页外，也支持客户端分页。

客户端分页，它的流程是：

定义一个变量，存储获取的数据：

定义一个变量，建立分页组件：

public cities!: MatTableDataSource<City>

@ViewChild(MatPaginator)
  _paginator: MatPaginator = new MatPaginator(new MatPaginatorIntl(), this.changeDetectorRef);

ngOnInit：通过httpClient向后台获取所有数据，数据存储到变量中。

  ngOnInit() {
    console.log("Init Start");
    this.http.get<City[]>(this.baseURL + "api/Cities").subscribe(result => {
      this.cities = new MatTableDataSource<City>(result);
    }, error => console.error(error)
    );
    console.log("Init End");
  }

ngAfterViewInit：此方法中对数据进行分页

ngAfterViewInit() {
    console.log("AfterViewInit Start");
    this.cities.paginator = this._paginator;
    console.log("AfterViewInit End");
  }

这样理论上，客户端分页就完成，但在测试过程中发现，始终无法分页。

经过研究判断，JS中所有方法默认都是采用异步的，这样就意味着ngOnInit执行完毕时，其实并未从后台获取到数据，此时变量还是为空的，这个时候执行ngAfterViewInit并不起作用。

解决办法：

在ngOnInit中补调ngAfterViewInit

  ngOnInit() {
    console.log("Init Start");
    this.http.get<City[]>(this.baseURL + "api/Cities").subscribe(result => {
      this.cities = new MatTableDataSource<City>(result);

      //获取完毕数据后，调用一次ngAfterViewInit来执行分页
      this.ngAfterViewInit();
    }, error => console.error(error)
    );
    console.log("Init End");
  }