Angular 垫子台的垫子分页器'；不能使用api数据

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

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>

我需要的数据在Filteredata下

当我这样做的时候

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

---

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

问题是，当您尝试分配分页器时，分页器不在DOM中（您的mat分页器位于具有*ngIf的div下）。您需要对Angular进行“更改”才能获得它，因此您需要在subscribe函数中包含一个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”为null或未定义。（请记住，html中有

*ngIf=“pokemon”

）。当您获得数据时，变量具有值，因此，“当Angular完成指令时”，刷新应用程序以显示表格。这是因为您需要一个setTimeout

最终有效的方法是删除模板上的*ngIf条件。我在堆栈溢出上找到了这个解决方案。Paginator现在工作正常。

我按照您的建议做了，但数据源仍然没有指向我需要的内容。如果使用dataSource作为数据源，则没有结果（我已经相应地更新了代码）。反应仍然是一样的

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

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;
   })
});