angular - 数据重新加载后Angular Paginator不工作
问题描述
我正在尝试MAT-TABLE
在不同的材料选项卡之间共享一个 Angular 材料表MAT-TABS
。此外,我正在从 a 获取数据,API
因此我在每个选项卡单击时调用一个函数。
正在检索数据并将其插入表中,但是paginator
并filter
停止工作。工作代码可以在这里看到,
https://stackblitz.com/edit/angular-aq9hja
这是 HTML 的示例,
<mat-tab-group (selectedTabChange)="tabClick($event)" >
<mat-tab label="Type1">
{{debug+1}}<br>
<ng-container *ngTemplateOutlet="tabContent"></ng-container>
</mat-tab>
<mat-tab label="Type2">
{{debug+1}}<br>
<ng-container *ngTemplateOutlet="tabContent"></ng-container>
</mat-tab>
</mat-tab-group>
<ng-template #tabContent>
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="getDatasource()" matSort>
<ng-container matColumnDef="ID">
<th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
<td mat-cell *matCellDef="let row"> {{row.ID}} </td>
</ng-container>
<ng-container matColumnDef="AUTHOR">
<th mat-header-cell *matHeaderCellDef mat-sort-header> AUTHOR </th>
<td mat-cell *matCellDef="let row"> {{row.AUTHOR }} </td>
</ng-container>
<ng-container matColumnDef="COUNT">
<th mat-header-cell *matHeaderCellDef mat-sort-header> TOTAL ARTS </th>
<td mat-cell *matCellDef="let row"> {{row.COUNT}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="getDisplayedColumns()"></tr>
<tr mat-row *matRowDef="let row; columns: getDisplayedColumns();"
>
</tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>
</ng-template>
这是component.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatSort } from '@angular/material/sort';
import { MatPaginator } from '@angular/material/paginator';
import {MatTabsModule} from '@angular/material/tabs';
import { HttpClient, HttpParams, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
constructor(private http: HttpClient) { }
private dataSource: MatTableDataSource<any>;
private displayedColumns: string[] = [];
private isLoading: boolean = true;
private debug:number=0;
@ViewChild(MatSort, { static: true }) sort: MatSort;
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
ngOnInit() {
console.log("NGINIT"+this.debug++);
this.dataSource = new MatTableDataSource();
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
this.populateType("", "1", "9999");
}
populateType(id: any, page: any, limit: any) {
...
}
populateForm(id: any, page: any, limit: any) {
...
}
applyFilter(filterValue: string) {
this.dataSource.filter = filterValue.trim().toLowerCase();
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
isPageLoading(): boolean {
return this.isLoading;
}
getDatasource(): MatTableDataSource<any> {
return this.dataSource;
}
getDisplayedColumns(): string[] {
return this.displayedColumns;
}
tabClick(event: any) {
console.log(event.index);
switch (event.index) {
case 0:
console.log("CASE1"+this.debug++);
this.populateType('','1','999999');
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
console.log('Type1');
break;
case 1:
console.log("CASE2"+this.debug++);
this.populateForm('','1','999999');
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
console.log('Type2');
break;
}
}
}
撞
解决方案
带有答案的工作https://stackblitz.com/edit/angular-yqdsr6 。
使用多个mat-paginator
你将不得不使用@ViewChildren
而不是@ViewChild
我还不得不调整你的进口app.module.ts
推荐阅读
- gnu-make - 如何检测是否需要共享库符号链接?
- android - 创建 Uri 到文件,有点无法提交数据
- php - 如何通过条件使用“with”laravel 关系函数来获取数据?
- matplotlib - Matplotlib 的后端不会从 TkAgg 更改为 GR
- javascript - 多个并发 setInterval() 会影响性能吗?
- asp.net-core - TagHelper 任务在升级到 Visual Studio 16.8.2 后意外失败
- selenium - 如何优化新 FirefoxDriver(firefoxOptions) 的启动时间 - java - selenium
- php - 具有样式并替换为随机字符串的精确 html 元素的正则表达式模式
- python - 求解耦合振荡器的运动方程
- react-native - 到达最后一个屏幕后对本机导航重置堆栈或选项卡做出反应