表格搜索过滤器无法工作，Angular 10
表格搜索过滤器无法工作，Angular 10
我正在开发一个用户模块，其中包含一个用于管理目的的用户视图。
我可以看到我的数据，所以这部分没问题，但我不明白搜索过滤器应该如何工作。以下是我的代码。我对TypeScript和Angular都是新手，所以我正在使用网上的示例，但是失败了。呵呵！无论如何，我在搜索过滤器中输入内容，但没有任何反应。
users.component.ts
import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { FormControl } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { Subject } from 'rxjs';
import { Router } from "@angular/router";
import { UserService } from '../../users/user.service';
import { MatInput } from "@angular/material/input";
import { MatSort } from '@angular/material/sort';
import { BehaviorSubject } from "rxjs";
import { Observable } from 'rxjs';
import { MatTableDataSource } from '@angular/material/table';
@Component({
selector: 'app-users',
templateUrl: './users.component.html',
styleUrls: ['./users.component.scss']
})
export class UsersComponent implements OnInit {
public users: any[] = [];
searchControl = new FormControl();
filteredOptions: Observable;
MatTableDataSource: Observable;
resetUsers: any;
@Input() header = "用户视图";
@Input() columns = [
{ userName : "用户名" },
{ firstName: "名字" },
{ lastName: "姓氏" },
{ phone: "电话" },
{ email: "邮箱" },
];
@Input() data: any[];
@ViewChild(MatInput, { static: false }) search: MatInput;
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;
displayData = [];
constructor(
private userService: UserService,
private httpClient: HttpClient
) { }
dataSource = new MatTableDataSource();
ngOnInit(): void {
this._getUsers();
}
ngAfterViewInit() {
this.userService.getUsers().subscribe(data => {
this.users = data.users;
});
this.search.stateChanges.subscribe(() => {
this.displayData = [];
this.users.forEach((entry) => {
if (entry.header.toLowerCase().includes(this.search.value.toLowerCase())) {
this.displayData.push(entry);
}
});
});
}
private _getUsers() {
this.userService;
this.userService.getUsers().subscribe(data => {
this.users = data.users;
});
}
}
user.component.html
问题原因：displayData变量没有被正确使用，导致表格搜索过滤不起作用。
解决方法1：将displayData作为表格的数据输入，代码如下：
同时，在获取用户数据时也要更新displayData变量，代码如下：
this.userService.getUsers().subscribe(data => {
this.users = data.users;
this.displayData = data.users;
});
解决方法2：创建一个过滤器管道来对表格数据进行过滤，代码如下：
过滤器：
import { Pipe, PipeTransform } from "@angular/core";
@Pipe({
name: "filterTable"
})
export class FilterTablePipe implements PipeTransform {
constructor() {}
transform(rows: any[], search: string): any {
// 在这里创建过滤逻辑
// 假设行对象有一个name属性，表示用户名
return rows.filter(row => row.name.includes(search));
}
}
在HTML中使用：
其中，searchValue是用户输入的搜索值，需要在代码中创建这个变量。
这里提供了一个根据输入值来过滤日期列表的示例，虽然不完全相同，但可以帮助你理解：[https://stackblitz.com/edit/angular-ivy-filter-date-list?file=src%2Fapp%2Fapp.component.html](https://stackblitz.com/edit/angular-ivy-filter-date-list?file=src%2Fapp%2Fapp.component.html)。
重要提示：在更新列表后，可能需要调用renderRows()方法来重新渲染表格，参考链接：[Calling renderRows() on Angular Material Table](https://stackoverflow.com/questions/49284358)。
