angular - 带有自定义过滤器的 Angular 8 材料表
问题描述
我已使用https://material.angular.io/components/table/examples中的“通过 HTTP 检索数据的表格”代码在 mat-table 中显示数据。我想向它添加自定义选择过滤器。我已经更新了代码,以便在更改选择下拉列表时,再次调用 ngAfterViewInit 并将选择下拉值传递给 API 调用,但是当更改每页的项目并选择过滤器时,多次调用 API 可以任何人都请帮助在此代码中实现过滤器
请找到以下代码:
TS文件
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { merge, of as observableOf } from 'rxjs';
import { catchError, map, startWith, switchMap } from 'rxjs/operators';
import { PersonDetail } from '../../shared/model/people';
import { PeopleService } from '../../shared/services/people.service';
/**
* @title People list retrieving data through HTTP
*/
@Component({
selector: 'app-people-list',
templateUrl: './people-list.component.html',
styleUrls: ['./people-list.component.css']
})
export class PeopleListComponent implements AfterViewInit {
filters = [
{value: 'aaa', viewValue: 'aaa'},
{value: 'bbb', viewValue: 'bbb'}
];
displayedColumns: string[] = ['name', 'action'];
data: PersonDetail[] = [];
resultsLength = 0;
isLoadingResults = true;
noRecords = false;
pageSize = 10;
filter: string = "";
@ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;
@ViewChild(MatSort, {static: false}) sort: MatSort;
constructor( private peopleService: PeopleService ) {}
// Update page size when user has changed it
handlePage(e: any) {
this.pageSize = e.pageSize;
}
onfilterSelection( event ) {
this.filter = event.value;
}
ngAfterViewInit() {
// If the user changes the sort order, reset back to the first page.
this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
merge(this.sort.sortChange, this.paginator.page)
.pipe(
startWith({}),
switchMap(() => {
this.isLoadingResults = true;
return this.peopleService.getPeople( this.sort.active, this.sort.direction, this.paginator.pageIndex, this.pageSize, this.filter );
}),
map((data : any) => {
// Flip flag to show that loading has finished.
this.isLoadingResults = false;
this.noRecords = false;
this.resultsLength = data.total_count;
return data.items;
}),
catchError(() => {
this.isLoadingResults = false;
// Catch if the API returned empty data.
this.noRecords = true;
return observableOf([]);
})
).subscribe(data => this.data = data);
}
}
HTML 文件
<div class="example-container mat-elevation-z8">
<!-- Display Spinner till the results are displayed -->
<div class="example-loading-shade" *ngIf="isLoadingResults || noRecords">
<mat-spinner *ngIf="isLoadingResults"></mat-spinner>
<!-- Display no records message if no data is found -->
<div class="example-rate-limit-reached" *ngIf="noRecords">
No records found.
</div>
</div>
<div class="example-table-container">
<mat-card>
<!-- filter -->
<mat-form-field>
<mat-label>Apply filter</mat-label>
<mat-select (selectionChange)="onfilterSelection($event)">
<mat-option *ngFor="let filter of filters" [value]="filter.value">
{{filter.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
</mat-card>
<table mat-table [dataSource]="data" class="example-table" matSort>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
<td mat-cell *matCellDef="let row">{{row.name}}</td>
</ng-container>
<!-- Action Column -->
<ng-container matColumnDef="action">
<th mat-header-cell *matHeaderCellDef>Action</th>
<td mat-cell *matCellDef="let row">
<mat-icon>edit</mat-icon>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
<!-- Pagination links -->
<mat-paginator [length]="resultsLength" [pageSize]="pageSize" [pageSizeOptions]="[10, 20, 100]" (page)="pageEvent = handlePage($event)" showFirstLastButtons></mat-paginator>
</div>
我需要根据选择的过滤器重新加载 mat-table 内容
解决方案
推荐阅读
- kubernetes - 无法在 Kubernetes 中附加或挂载卷
- linux - kubernetes 使用 aws efs 动态配置卷
- swift - 为什么我的导航按钮停止工作
- javascript - Vue - 在创建的钩子中使用来自 API 的数据填充存储
- python - Pandas 数据框将重复的列一个接一个地合并
- ansible - 如何在没有命令行清单的情况下使用 ansible-playbook?
- python - 使用 Python 调用经过身份验证的 Beebole API
- c# - C# Windows10 | TransparencyKey 不适用于子表单
- docker - 运行代码构建时面临问题
- android - MapView 在 android 7 中与其父视图重叠