我有一个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));
}
}
如果更改国家与国家/地区同步列表异步;分页器的作品。
有人可以帮忙吗?谢谢
最佳答案
您的最后评论帮助我找到了解决方案。实际上,这是由于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;
}