Angular Material 分页器无法处理异步数据

Question

我有一个 Angular Material 数据表，我正在尝试为其添加分页。

我遇到过这个问题，如果数据是异步源，那么 Mat-Paginator 不起作用。

我尝试使用同步源，分页按预期工作，但由于我有一个可观察的结果，当数据最终到达时分页并未初始化。

但是，我尝试过寻找这个问题，到目前为止似乎没有人遇到这个问题，所以这可能是我的设置问题。

以下是我的组件的 ts 文件。

import { Component, Input, Output, EventEmitter, style, Inject, OnInit, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Router } from '@angular/router';
import { Country} from '../../core/models/country';
import { OnChanges, AfterViewInit } from '@angular/core';
import { MatTableDataSource, MatPaginator } from '@angular/material';

@Component({
    // tslint:disable-next-line:component-selector
    selector: 'app-country-list',
    templateUrl: './country-preview-list.html',
    styleUrls : ['./country-preview-list.css']
})
export class CountryListComponent implements OnChanges, AfterViewInit {
    @Input() public countries: Country[];
    displayedColumns = ['Name', 'Code'];
    dataSource: MatTableDataSource<Country>;

    @ViewChild(MatPaginator) paginator: MatPaginator;

    ngOnChanges(): void {
        this.dataSource = new MatTableDataSource<Country>(this.countries);
    }

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

}

并且父组件 html 有此行来添加我的组件

<app-country-list [countries]="countries$ | async"></app-country-list>

编辑

父组件 TS 文件

import { Component, ChangeDetectionStrategy, OnChanges } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
import { take } from 'rxjs/operators';

import * as fromCountries from '../../state/countries/reducers';
import * as fromConfiguration from '../../state/configuration/reducers';
import * as country from '../../state/countries/actions/countries';
import * as configuration from '../../state/configuration/actions/configuration';
import { Country} from '../../core/models/country';
import { OnInit } from '@angular/core/src/metadata/lifecycle_hooks';

@Component({
  selector: 'app-countries-page',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <app-country-search (searchCountries)="search($event)"></app-country-search>
    <app-country-list [countries]="countries$ | async"></app-country-list>
  `,
})
export class CountriesPageComponent {
  countries$: Observable<Country[]>;

  constructor(private store: Store<fromCountries.State>) {
    this.countries$ = store.pipe(select(fromCountries.getAllCountries));
  }

  search(query: any) {
    this.store.dispatch(new country.Search(query));
  }

}

如果改变国家$ |异步到同步国家列表；分页器有效。

有人可以帮忙吗？谢谢

Answer 1

您的最后评论帮助我找到了解决方案。这确实是由于 dataTable 位于 ngIf* 内造成的。

描述了该问题 here更详细。

要解决此问题，请删除此代码:

@ViewChild(MatPaginator) paginator: MatPaginator;

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

并添加以下内容:

private paginator: MatPaginator;

@ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
  this.paginator = mp;
  this.dataSource.paginator = this.paginator;
}