Mat Table的Mat Paginator无法使用api数据

如何解决Mat Table的Mat Paginator无法使用api数据

我见过类似的问题，但似乎没有任何效果。我有一个席子表，在其中显示api的数据。但是我不知道如何遍历“数据源”。以下是我的代码，以及检查控制台日志时如何获取数据。 ts文件

import {AfterViewInit,Component,OnInit,ViewChild} from '@angular/core';
import {Pokemon,PokemonData} from '../../models/pokemon';
import {PokemonService} from '../../models/services/pokemon.service';
import {ActivatedRoute} from '@angular/router';
import {MatTableDataSource} from '@angular/material/table';
import {MatPaginator} from '@angular/material/paginator';

@Component({
  selector: 'app-pokemon',templateUrl: './pokemon.component.html',styleUrls: ['./pokemon.component.css']
})
export class PokemonComponent implements OnInit {
  public pokemon: Pokemon[];
  public name: string;
  public url: string;
  public type: string;
  expandedElement: PokemonData | null;
  dataSource = new MatTableDataSource();
  displayPokemonColumns: string[] = ['name','url','pokemonDetails'];
  @ViewChild(MatPaginator,{read: true}) paginator: MatPaginator;
  //
  // // tslint:disable-next-line:typedef
  // tslint:disable-next-line:typedef
  // ngAfterViewInit() {
  //   // this.dataSource.paginator = this.paginator;
  // //
  // }

  constructor(private pokemonService: PokemonService,private route: ActivatedRoute) {
  }

  // function (which is called below)issues call to API. subscribes shows to the results that are returned. adds results to shows array
  onLoadPokemonList(): void {
  this.pokemonService.getPokemonList().subscribe(
    res => {
  // this.pokemon = JSON.parse(JSON.stringify(res));
  this.pokemon = res;
  this.dataSource.data = this.pokemon;
  setTimeout(() => {
        this.dataSource.paginator = this.paginator;

      });
  console.log(this.dataSource);
    });

  }


  ngOnInit(): void {
  this.onLoadPokemonList();

  }


}

html文件

<div class="table"  *ngIf="pokemon">
  <h1 matColumnDef="title">POKEDEX</h1>
  <table mat-table #table [dataSource]="dataSource" class="mat-elevation-z8" multiTemplateDaTarows>
<!--    <table mat-table [dataSource]="pokemon.results" class="mat-elevation-z8" multiTemplateDaTarows>-->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef> Name </th>
<!--  <td mat-cell *matCellDef="let res"> {{res?.name}} </td>-->
      <td mat-cell *matCellDef="let res"> {{res.name}} </td>
    </ng-container>
    <ng-container matColumnDef="url">
      <th mat-header-cell *matHeaderCellDef> URL </th>
      <td mat-cell *matCellDef="let res"> {{res.url}} </td>
    </ng-container>
    <ng-container matColumnDef="pokemonDetails">
      <th mat-header-cell *matHeaderCellDef> Pokemon Details </th>
      <td mat-cell *matCellDef="let res">
        <button mat-raised-button color="primary" routerLink="/pokemonData/{{res.name}}">Pokemon Details</button>
      </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayPokemonColumns; sticky: true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayPokemonColumns;"
        class="example-element-row"
        [class.example-expanded-row]="expandedElement === row"
        (click)="expandedElement = expandedElement === row ? null : row"></tr>
    </table>
  <mat-paginator #paginator
                 [pageSize]="10"
                 [pageSizeOptions]="[5,10,20]">
  </mat-paginator>
</div>

这是我得到的数据：

MatTableDataSource {_renderData: BehaviorSubject,_filter: BehaviorSubject,_internalPageChanges: Subject,_renderChangesSubscription: Subscriber,sortingDataAccessor: ƒ, …}filterPredicate: (data,filter) => {…}filteredData: {count: 1050,next: "https://pokeapi.co/api/v2/pokemon?offset=150&limit=150",prevIoUs: null,results: Array(150)}sortData: (data,sort) => {…}sortingDataAccessor: (data,sortHeaderId) => {…}_data: BehaviorSubject {_isScalar: false,observers: Array(1),closed: false,isstopped: false,hasError: false, …}_filter: BehaviorSubject {_isScalar: false, …}_internalPageChanges: Subject {_isScalar: false,observers: Array(0), …}_paginator: undefined_renderChangesSubscription: Subscriber {closed: false,_parentOrParents: null,_subscriptions: Array(1),syncErrorValue: null,syncErrorThrown: false, …}_renderData: BehaviorSubject {_isScalar: false, …}data: (...)filter: (...)paginator: (...)sort: (...)__proto__: DataSource

我需要的数据在filteredData下。

当我这样做

<table mat-table [dataSource]="pokemon.results" class="mat-elevation-z8" multiTemplateDaTarows>

我得到了正确的表而不是数据源，但分页器（显然）不起作用。

解决方法

问题是当您尝试分配分页器时，分页器不在DOM中（您的mat-paginator在具有* ngIf的div下）。您需要对Angular进行“更改”才能获取它，因此需要将其封装在订阅函数内部的setTimeout中

this.pokemonService.getPokemonList().subscribe(res => {
  //why you use JSON.stringify? in Angular by defect a http.get return a json
  this.pokemon = JSON.parse(JSON.stringify(res));
  // this.pokemon = res;
  this.dataSource.data = this.pokemon;

   //here you indicate the paginator
   setTimeout(()=>{
    this.dataSource.paginator = this.paginator;
   })
});

简要说明：在订阅并获取数据之前，变量“ pokemon”为空或未定义。（请注意，您在HTML中有*ngIf="pokemon"）。当您获取数据时，变量具有值，因此，“当Angular完成指令时”，刷新应用程序以显示表格。这是因为您需要一个setTimeout

最后起作用的是删除了模板上的* ngIf条件。我在堆栈溢出时找到了此解决方案。分页器现在可以正常工作。