如何從 Angular 材料更新 mat-table 數據

Question

朋友們，我得到了pokeapi，但是由於我可以在第二頁刷新以下數據，它在dataSource中不起作用，我可能做錯了嗎？

.ts

import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
import { Pokemoni } from '../models/pokemon.model';
import { PokeService } from './poke.service';
import { MatPaginator, MatTableDataSource, MatDialog, PageEvent} from '@angular/material';
import { SuperModalComponent } from './supermodal/supermodal.component';
@Component({
  selector: 'app-pokelista',
  templateUrl: './pokelista.component.html',
  styleUrls: ['./pokelista.component.scss']
})

export class PokelistaComponent implements OnInit, OnDestroy {
  dataSource = new MatTableDataSource<Pokemoni>(); // arreglo de tipo Tabla/Pokemon
  cols: string[] = ['id', 'pokemon', 'icono', 'detalles']; // columnas tabla lista
  pokemon: Pokemoni[] = [];
  superball = '../../../assets/images/png/superball.png';
  indicePagina = [3, 5, 10];
  totalPoke: number;
  pokePorPagina = 5;
  paginaActual = 1;
  @ViewChild(MatPaginator, {static: true}) paginacion: MatPaginator;

  constructor(
    private pokeServicio: PokeService,
    public dlg: MatDialog
  ) {}
  ngOnInit() {
    this.dataSource.paginator = this.paginacion;
    this.dataSource.paginator._intl.itemsPerPageLabel = 'Pokémon por Pagina';
    this.getPo();
  }
  getPo() {
    this.pokeServicio.getP().subscribe( (res) => {
      this.pokemon = res.pokemon;
      this.totalPoke = this.pokemon.length;
      this.dataSource.data = this.pokemon;
      this.dataSource.paginator = this.paginacion;
      // setTimeout(() => {  });
    });
  }
  getPokeD(i: number) {
    const index = i + 1;
    this.pokeServicio.setPokeDetails(index);
    this.openPokemon();
  }

.html

<div class="container">
    <mat-card>
        <div class="filter">
            <mat-form-field>
                <input matInput type="text" (keyup)="makeFiltro($event.target.value)" placeholder="Filtro" />
            </mat-form-field>
            <button color="warn" mat-button>
            Ver Selección
            </button>
        </div>
        <div class="container">
            <table mat-table [dataSource]="dataSource">
                <ng-container matColumnDef="id">
                    <th mat-header-cell *matHeaderCellDef>ID</th>
                    <td mat-cell *matCellDef="let element; let i = index">{{ i + 1 }}</td>
                </ng-container>
                <ng-container matColumnDef="pokemon">
                    <th style="padding-right: 50px;" mat-header-cell *matHeaderCellDef>
                        Pokémon
                    </th>
                    <td style="padding-right: 50px;" mat-cell *matCellDef="let element">
                        <strong>{{ element.pokemon | titlecase }}</strong>
                    </td>
                </ng-container>
                <ng-container matColumnDef="icono">
                    <th style="padding-right: 50px;" mat-header-cell *matHeaderCellDef>
                        Icono
                    </th>
                    <td mat-cell *matCellDef="let element">
                        <img class="mobile-label" style="width: 45px;height:45px" [src]="element.icono" />
                    </td>
                </ng-container>
                <ng-container matColumnDef="detalles">
                    <th style="padding-right: 50px;" mat-header-cell *matHeaderCellDef>
                        Detalles
                    </th>
                    <td id="superball" style="padding-left: 50px;cursor: pointer;" mat-cell *matCellDef="let element; let i = index;">
                        <img (click)="getPokeD(i);$event.stopPropagation()" [src]="superball" />
                    </td>
                </ng-container>
                <mat-header-row *matHeaderRowDef="cols"></mat-header-row>
                <mat-row *matRowDef="let row; columns: cols"></mat-row>
            </table>
        </div>
    </mat-card>
    <mat-card>
        <mat-paginator #paginacion [pageSizeOptions]="indicePagina" (page)="onChangePagina($event)" [length]="totalPoke" [pageSize]="pokePorPagina"></mat-paginator>
    </mat-card>
</div>

單擊第二頁后，項目的分頁沒有更新，我已經連接了一個模式，但我只看到所有頁面中的索引 1 到 5，為什么會這樣？ 它只是前端

Answer 1

您正在使用index來顯示與*ngFor關聯的id並給出當前行的索引，您可以從組件中添加它，也可以使用 pageSize 和 currentPage 來計算 id

{{(currentPage*pageSize)+i+1}}

看到它在行動

將 id 附加到您的數據的演示

Answer 2

為了讓索引為下一頁更新......我們喜歡以下內容：

( [pageIndex] X [pageSize] ) + ( [rowIndex] + 1 ) ... 在我們的代碼中歸結為以下內容：

<mat-table #table2 [dataSource]="dataSource2" matSort>
 <ng-container matColumnDef="description">
 <mat-header-cell *matHeaderCellDef mat-sort-header> Description </mat-header-cell>
    <mat-cell *matCellDef="let item; let j = index"> 
      {{ (j+1) + (myPaginator.pageIndex * myPaginator.pageSize) }} - 
      {{item.description}} </mat-cell>
  </ng-container>
 <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<mat-paginator #myPaginator [length]="25"
              [pageSize]="5"
              [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator> 

你可以在這里查看工作中的 stackblitz演示

Answer 3

我有一個類似的問題。 我通過在刷新數據時總是生成一個新的數據源來解決它。 但我不知道是否有更好的方法來解決這個問題。

getPo() {
    this.pokeServicio.getP().subscribe( (res) => {
      this.pokemon = res.pokemon;
      this.totalPoke = this.pokemon.length;
      this.dataSource = new MatTableDataSource<Pokemoni>(this.pokemon);;
      this.dataSource.paginator = this.paginacion;
      this.dataSource.paginator._intl.itemsPerPageLabel = 'Pokémon por Pagina';
    })
}