问题原因是，过滤器管道导致Angular不再跟踪每个项目的位置，这会导致分页器的失效。 解决方法是，使用Array.slice()对数据进行分组，并重新提示Angular跟踪着原始数组的位置。

示例代码如下：

在ts文件中添加如下代码：

//必要的变量声明 p: number = 1; itemsPerPage: number = 4; data: any[] = []; //原始数据数组 filteredData: any[] = []; // 进行过滤得到的数据数组

//进行过滤操作 filter(searchTerm: string) { this.filteredData = this.data.filter(item => { return item.name.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1 || item.age.toString().indexOf(searchTerm) !== -1 || item.location.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1; }); this.p = 1; //重置page }

//返回数组切片 get items(): any[] { return this.filteredData.slice((this.p - 1) * this.itemsPerPage, (this.p - 1) * this.itemsPerPage + this.itemsPerPage); }

在HTML文件中添加如下代码：

以上代码所示示例每页显示4条记录，并具备筛选和分页功能。