我想制作 mat-table,在那里我可以在通过 HTTP 检索数据时进行过滤。我设法通过使用官方文档示例进行排序和分页。但我不知道如何为这个例子添加过滤:
HTML:
<div class="example-container mat-elevation-z8">
<div class="example-loading-shade"
*ngIf="isLoadingResults || isRateLimitReached">
<mat-spinner *ngIf="isLoadingResults"></mat-spinner>
<div class="example-rate-limit-reached" *ngIf="isRateLimitReached">
GitHub's API rate limit has been reached. It will be reset in one minute.
</div>
</div>
<div class="example-table-container">
<table mat-table [dataSource]="filteredAndPagedIssues" class="example-table" matSort
matSortActive="created" matSortDisableClear matSortDirection="desc"
(matSortChange)="resetPaging()">
<!-- Number Column -->
<ng-container matColumnDef="number">
<th mat-header-cell *matHeaderCellDef>#</th>
<td mat-cell *matCellDef="let row">{{row.number}}</td>
</ng-container>
<!-- Title Column -->
<ng-container matColumnDef="title">
<th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let row">{{row.title}}</td>
</ng-container>
<!-- State Column -->
<ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef>State</th>
<td mat-cell *matCellDef="let row">{{row.state}}</td>
</ng-container>
<!-- Created Column -->
<ng-container matColumnDef="created">
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>
Created
</th>
<td mat-cell *matCellDef="let row">{{row.created_at | date}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
<mat-paginator [length]="resultsLength" [pageSize]="30"></mat-paginator>
</div>
TS:
/**
* @title Table retrieving data through HTTP
*/
@Component({
selector: 'table-http-example',
styleUrls: ['table-http-example.css'],
templateUrl: 'table-http-example.html',
})
export class TableHttpExample implements AfterViewInit {
displayedColumns: string[] = ['created', 'state', 'number', 'title'];
exampleDatabase: ExampleHttpDatabase | null;
filteredAndPagedIssues: Observable<GithubIssue[]>;
resultsLength = 0;
isLoadingResults = true;
isRateLimitReached = false;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
constructor(private _httpClient: HttpClient) {}
ngAfterViewInit() {
this.exampleDatabase = new ExampleHttpDatabase(this._httpClient);
this.filteredAndPagedIssues = merge(this.sort.sortChange, this.paginator.page)
.pipe(
startWith({}),
switchMap(() => {
this.isLoadingResults = true;
return this.exampleDatabase!.getRepoIssues(
this.sort.active, this.sort.direction, this.paginator.pageIndex);
}),
map(data => {
// Flip flag to show that loading has finished.
this.isLoadingResults = false;
this.isRateLimitReached = false;
this.resultsLength = data.total_count;
return data.items;
}),
catchError(() => {
this.isLoadingResults = false;
// Catch if the GitHub API has reached its rate limit. Return empty data.
this.isRateLimitReached = true;
return observableOf([]);
})
);
}
resetPaging(): void {
this.paginator.pageIndex = 0;
}
}
export interface GithubApi {
items: GithubIssue[];
total_count: number;
}
export interface GithubIssue {
created_at: string;
number: string;
state: string;
title: string;
}
/** An example database that the data source uses to retrieve data for the table. */
export class ExampleHttpDatabase {
constructor(private _httpClient: HttpClient) {}
getRepoIssues(sort: string, order: string, page: number): Observable<GithubApi> {
const href = 'https://api.github.com/search/issues';
const requestUrl =
`${href}?q=repo:angular/components&sort=${sort}&order=${order}&page=${page + 1}`;
return this._httpClient.get<GithubApi>(requestUrl);
}
}
如何为这个例子添加过滤?我想只在客户端进行排序、过滤和分页以使其正常工作,但我认为如果有人可以解决这个问题,最好在服务器端执行此操作。
答案 0 :(得分:1)
例如,如果您想根据单选按钮更改进行过滤,您可以:
<mat-radio-group (change)="filterChanged.emit($event)" [(ngModel)]="filterString">
<mat-radio-button value="A">A</mat-radio-button>
<mat-radio-button value="B">B</mat-radio-button>
</mat-radio-group>
filterString = 'A';
filterChanged = new EventEmitter<MatRadioChange>();
this.filteredAndPagedIssues = merge(this.sort.sortChange, this.paginator.page)`
到
this.filteredAndPagedIssues = merge(this.sort.sortChange, this.paginator.page, this.filterChanged)
然后您可以使用 this.filterString
进行服务器请求。