在Angular项目中实现高效多字段模糊搜索与数据过滤

<input type="text" [(ngModel)]="lastname" (input)="Search()"/>
<mat-table [dataSource]="usuarios">
    <!-- ... 省略其他列定义 ... -->
    <ng-container matColumnDef="firstName">
      <mat-header-cell *matHeaderCellDef> Nome </mat-header-cell>
      <mat-cell *matCellDef="let element">{{ element.firstName }}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="lastName">
      <mat-header-cell *matHeaderCellDef>Sobrenome</mat-header-cell>
      <mat-cell *matCellDef="let element">{{ element.lastName }}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="username">
        <mat-header-cell *matHeaderCellDef>Username</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; // 搜索关键词，仅用于姓氏

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

  constructor(private service: GerenciamentoUsuariosService) {
    this.lastname = '';
  }

  ngOnInit(): void {
    this.refreshListUser1()
  }

  refreshListUser1() {
    this.usuarios1 = this.service.list().subscribe(
      resp => {
        this.usuarios = resp.content // 直接赋值给显示数据源
       console.log(this.usuarios)
      });
  }

  Search(){
    if(this.lastname != ""){
      this.usuarios = this.usuarios.filter(res =>{
        return res.lastName.toLocaleLowerCase().match(this.lastname.toLocaleLowerCase());
      })
    }else if(this.lastname == ""){
      this.ngOnInit(); // 问题：清空搜索词时会重新加载数据
    }
  }
}

<input type="text" [(ngModel)]="searchTerm" (input)="Search()" placeholder="搜索姓名、邮箱或用户名"/>

<mat-table [dataSource]="usuarios">
    <!-- Name Column -->
    <ng-container matColumnDef="firstName">
      <mat-header-cell *matHeaderCellDef> 姓名 </mat-header-cell>
      <mat-cell *matCellDef="let element">{{ element.firstName }}</mat-cell>
    </ng-container>
    <!-- Last Name Column -->
    <ng-container matColumnDef="lastName">
      <mat-header-cell *matHeaderCellDef>姓氏</mat-header-cell>
      <mat-cell *matCellDef="let element">{{ element.lastName }}</mat-cell>
    </ng-container>
    <!-- UserName Column -->
    <ng-container matColumnDef="username">
        <mat-header-cell *matHeaderCellDef>用户名</mat-header-cell>
        <mat-cell *matCellDef="let element">{{ element.username }}</mat-cell>
      </ng-container>
      <!-- Email Column -->
      <ng-container matColumnDef="email">
        <mat-header-cell *matHeaderCellDef>电子邮件</mat-header-cell>
        <mat-cell *matCellDef="let element">{{ element.email }}</mat-cell>
      </ng-container>
      <!-- ... 其他列和操作按钮 ... -->
</mat-table>

import { Component, OnInit, Input } from '@angular/core';
import { GerenciamentoUsuariosService } from './gerenciamento-usuarios.service'; // 假设服务路径正确

@Component({
  selector: 'app-gerenciamento-usuarios-lista',
  templateUrl: './gerenciamento-usuarios-lista.component.html',
  styleUrls: ['./gerenciamento-usuarios-lista.component.scss']
})
export class GerenciamentoUsuariosListaComponent implements OnInit {
  @Input() usuarios: any[] = []; // 用于显示和过滤的数据列表
  originalUsuarios: any[] = []; // 存储原始的完整数据列表
  searchTerm: string = ''; // 通用的搜索关键词

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

  constructor(private service: GerenciamentoUsuariosService) { }

  ngOnInit(): void {
    this.refreshListUser1();
  }

  refreshListUser1(): void {
    this.service.list().subscribe(
      resp => {
        this.originalUsuarios = resp.content; // 将完整数据存储到 originalUsuarios
        this.usuarios = [...this.originalUsuarios]; // 初始化显示列表为完整数据
        console.log(this.usuarios);
      },
      error => {
        console.error('获取用户列表失败:', error);
        // 处理错误，例如显示错误消息给用户
      }
    );
  }

  Search(): void {
    const keyword = this.searchTerm.toLocaleLowerCase().trim(); // 获取并转换为小写，去除首尾空格

    if (keyword) {
      // 如果有搜索关键词，则从原始数据中过滤
      this.usuarios = this.originalUsuarios.filter(res => {
        return res.firstName.toLocaleLowerCase().includes(keyword) ||
               res.lastName.toLocaleLowerCase().includes(keyword) ||
               res.username.toLocaleLowerCase().includes(keyword) ||
               res.email.toLocaleLowerCase().includes(keyword);
      });
    } else {
      // 如果搜索关键词为空，则重置显示列表为原始完整数据
      this.usuarios = [...this.originalUsuarios];
    }
  }
}