[英]How update mat-table data from Angular Material
朋友们,我得到了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,为什么会这样? 它只是前端
您正在使用index
来显示与*ngFor
关联的id
并给出当前行的索引,您可以从组件中添加它,也可以使用 pageSize 和 currentPage 来计算 id
{{(currentPage*pageSize)+i+1}}
为了让索引为下一页更新......我们喜欢以下内容:
( [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演示
我有一个类似的问题。 我通过在刷新数据时总是生成一个新的数据源来解决它。 但我不知道是否有更好的方法来解决这个问题。
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';
})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.