Angular 8 材料表带定制滤镜

共0个回答, 标签: angular filter angular-material angular8 mat-table

我使用了 “通过 HTTP 检索数据的表” 代码Https://material.angular.io/components/table/examples用于在 mat-table 中显示数据。我想添加自定义选择过滤器。我已经更新了代码,以便在更改选择下拉列表时,再次调用 ngAfterViewInit,并将选择下拉列表值传递给 API 调用, 但是,当每页的项目被更改并选择过滤器时,API 会被多次调用。任何人都可以在此代码中帮助实现过滤器吗

请找到以下代码:

TS 文件

从 '@ angular/core' 导入 {Component,ViewChild,AfterViewInit};
从 '@ angular/material/paginator' 导入 {MatPaginator};
从 '@ angular/material/sort' 导入 {MatSort};
从 'rxjs' 导入 {合并,作为可观察值};
从 'rxjs/operators' 导入 {catchError 、 map 、 startWith 、 switchMap};
从 '../shared/model/people'; 导入 {PersonDetail}
从 '../shared/services/people.Service'; 导入 {PeopleService}

/* *
* @ 标题人物列表通过 HTTP 检索数据
*/
@ 组件 ({
选择器: 'app-people-list',
模板程序: './people-list.component.html',
样式 url: ['./people-list.component.css']
})
导出类 peopleistcomponent 实现 AfterViewInit {
过滤器 = [
{值: 'aaa',viewValue: 'aaa'},
{值: 'bbb',视图值: 'bbb'}
];

DisplayedColumns: 字符串 [] = ['name','action'];
数据: PersonDetail [] = [];

结果长度 = 0;
IsLoadingResults = true;
NoRecords = false;
PageSize = 10;

过滤器: 字符串 = "";

@ ViewChild (MatPaginator,{static: false}) paginator: MatPaginator;
@ ViewChild (MatSort,{static: false}) 排序: MatSort;

构造函数 (私有 peopleService: PeopleService) {}

//当用户更改页面时更新页面大小
HandlePage (e: any) {
这.pageSize = e.pageSize;
}

OnfilterSelection (事件) {
此.filter = event.value;
}

NgAfterViewInit () {
//如果用户更改排序顺序,请重置回第一页。
This.sort.sortChange.subscribe () => this.paginator.pageIndex = 0);

合并 (这个.sort.sortChange,这个.paginator.page)
。管道 (
开始 ({})
SwitchMap (() => {
这个.isLoadingResults = true;
返回这个.peopleService.getPeople (这个.sort.active,这个.sort.direction,这个.paginator.pageIndex,这个.pageSize,这个.filter);
}),
地图 ((数据: 任何) => {
//翻转标志以显示加载已完成。
This.isLoadingResults = false;
这个.noRecords = false;
This.Resultlength = data.total_count;

返回数据。项目;
}),
CatchError (() => {
This.isLoadingResults = false;
//如果 API 返回空数据,则捕获。
这个.noRecords = true;
返回可观测的 ([]);
})
)。订阅 (数据 => 这个。数据 = 数据);
}
}

HTML 文件







未找到记录。








应用滤波器


{{Filter.viewValue}}











名称
{{Row.name}}



动作

编辑











我需要根据所选的过滤器重新加载 mat-table 内容

相关问题

从 angularcli 中的 HTTP Get 请求检索到的数组的范围 如何将角2前置快速 JS 变量导出到角2分量? Angular block web 请求使用的服务器吗? 使用滤波器方法后组合两个数组 2D 数组-如何删除重复的值,但保持子数组分开 如何使用流从双数组中过滤出非 int 值? 如何添加边界半径角垫表? 使用 Angular 材料声明的 Angular 编译警告 NullInjectorError: 没有提供为 ViewportScroller 调用重试超过异常,而 ng 构建 我应该如何在 Angular 8 中使用 @ ViewChild 的新静态选项? Angular 8-懒加载模块: 错误 TS1323: 只有当 “-module” 标志为 “commonjs” 或 “esnext” 时,才支持动态导入 Angular 8 材料表带定制滤镜