Angular项目实现多字段动态过滤指南

<input type="text" [(ngModel)]="lastname" (input)="Search()"/>
<mat-table [dataSource]="usuarios">
    <!-- ... 其他列定义 ... -->
    <ng-container matColumnDef="firstName">
      <mat-header-cell *matHeaderCellDef> 姓名 </mat-header-cell>
      <mat-cell *matCellDef="let element">{{ element.firstName }}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="lastName">
      <mat-header-cell *matHeaderCellDef>姓氏</mat-header-cell>
      <mat-cell *matCellDef="let element">{{ element.lastName }}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="username">
        <mat-header-cell *matHeaderCellDef>用户名</mat-header-cell>
        <mat-cell *matCellDef="let element">{{ element.username }}</mat-cell>
      </ng-container>
      <ng-container matColumnDef="email">
        <mat-header-cell *matHeaderCellDef>E-mail</mat-header-cell>
        <mat-cell *matCellDef="let element">{{ element.email }}</mat-cell>
      </ng-container>
    <!-- ... 其他列定义 ... -->
</mat-table>

export class GerenciamentoUsuariosListaComponent implements OnInit {
  @Input() usuarios: any[] = []; // 当前显示的用户列表
  usuarios1: any; // 原始用户数据，可能用于重置
  lastname: string = ''; // 搜索关键字，此处命名为lastname具有误导性，因为它将用于多字段搜索

  // ... 其他属性和方法 ...

  readonly displayedColumns = ['firstName', 'lastName', 'username','email','actions'];

  constructor(private service: GerenciamentoUsuariosService) {}

  ngOnInit(): void {
    this.refreshListUser1(); // 初始化时加载数据
  }

  refreshListUser1() {
    this.service.list().subscribe(
      resp => {
        this.usuarios = resp.content; // 将API响应赋值给usuarios
        this.usuarios1 = resp.content; // 保留一份原始数据，以便在清空搜索时恢复
      });
  }

  Search() {
    if (this.lastname !== "") {
      this.usuarios = this.usuarios.filter(res => {
        return res.lastName.toLocaleLowerCase().match(this.lastname.toLocaleLowerCase());
      });
    } else {
      this.ngOnInit(); // 当搜索框为空时，重新加载数据，但更好的做法是使用备份数组
    }
  }
}

export class GerenciamentoUsuariosListaComponent implements OnInit {
  @Input() usuarios: any[] = []; // 当前显示的用户列表
  allUsuarios: any[] = []; // 存储所有用户的原始数据，用于重置和过滤
  searchTerm: string = ''; // 通用搜索关键字

  // ... 其他属性和方法 ...

  constructor(private service: GerenciamentoUsuariosService) {}

  ngOnInit(): void {
    this.loadUsers(); // 初始化时加载数据
  }

  loadUsers() {
    this.service.list().subscribe(
      resp => {
        this.allUsuarios = resp.content; // 存储原始数据
        this.usuarios = [...this.allUsuarios]; // 初始显示所有用户
      });
  }

  Search() {
    const keyword = this.searchTerm.toLocaleLowerCase(); // 将搜索关键字转换为小写

    if (keyword) {
      this.usuarios = this.allUsuarios.filter(user => {
        // 检查多个字段是否包含搜索关键字
        return user.firstName.toLocaleLowerCase().includes(keyword) ||
               user.lastName.toLocaleLowerCase().includes(keyword) ||
               user.username.toLocaleLowerCase().includes(keyword) ||
               user.email.toLocaleLowerCase().includes(keyword);
      });
    } else {
      // 当搜索关键字为空时，恢复显示所有用户
      this.usuarios = [...this.allUsuarios];
    }
  }
}

<input type="text" [(ngModel)]="searchTerm" (input)="Search()"/>
<!-- ... mat-table 内容不变 ... -->