Question

我有一个Angular材料数据表，我正在尝试添加分页。

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

我尝试使用Sync源和Pagination按预期工作但由于我有一个可观察的分页，当数据最终到达时，分页不会被初始化。

但是，我已尝试搜索此问题，到目前为止似乎没有人遇到此问题，因此可能是我的设置。

以下是我的组件的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;
}

Answer 2

如果您需要加载（异步），那么在加载后您需要渲染表格并设置分页异步。试试这个

component.html

<loading-component *ngIf="isLoading$ | async"></loading-component> <--WHILE Loading

<div *ngIf="!(isLoading$ | async)"> <-- AFTER Loading
    <ng-container *ngIf="dataSource.data.length >= 1; else noData">  <--Check if there's data
        <table mat-table [dataSource]="dataSource">
            ...
        </table>
 <mat-paginator></mat-paginator>
    </ng-container>
    <ng-template #noData>  <- In case there is not data (to not show the table/table-header)
        ...
    </ng-template>
</div>

component.ts

import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { Observable } from 'rxjs/Observable';

export class Component {
  dataSource = new MatTableDataSource<any>();
  isLoading$: Observable<boolean>;  
  private _paginator: MatPaginator;
  
@ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) { <--SET you can fetch (async)
    this._paginator = mp;
    this.dataSource.paginator = this._paginator;
  }
.. the rest of the component logic ...

使用 SET，您可以将异步数据提取到表中，然后对其进行分页。

继续编码 \m/

Angular Material Paginator不使用异步数据

2 个答案: