Angular多字段动态过滤技巧分享

大家好，我们又见面了啊~本文《Angular多字段动态过滤实现方法》的内容中将会涉及到等等。如果你正在学习文章相关知识，欢迎关注我，以后会给大家带来更多文章相关文章，希望我们能一起进步！下面就开始本文的正式内容~

本教程详细介绍了如何在Angular应用中实现高效的多字段数据过滤功能。通过优化现有的单字段搜索逻辑，我们将学习如何扩展过滤条件，使其能够同时匹配用户列表中的姓名、邮箱和用户名等多个字段，确保大小写不敏感的模糊匹配，并提供代码示例和最佳实践，以提升用户体验和应用性能。

在现代Web应用中，数据列表的搜索和过滤功能是提升用户体验的关键。当用户需要从大量数据中查找特定信息时，一个灵活的搜索机制能够大大提高效率。本教程将指导您如何在Angular项目中实现一个多字段的动态过滤功能，允许用户根据姓名、邮箱、用户名等多个属性进行模糊搜索。

理解单字段过滤的局限性

在许多初始实现中，过滤功能可能仅限于单个字段，例如只根据用户的姓氏进行搜索。考虑以下HTML和TypeScript代码片段：

HTML 模板 (.html)

<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>

TypeScript 组件 (.ts)

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(); // 当搜索框为空时，重新加载数据，但更好的做法是使用备份数组
    }
  }
}

上述Search()方法仅根据lastName字段进行过滤。如果用户希望同时搜索firstName、email或username，则此方法无法满足需求。此外，当搜索框为空时，直接调用ngOnInit()可能会触发不必要的API请求，更好的做法是维护一份原始数据副本。

实现多字段动态过滤

要实现多字段过滤，我们需要修改Search()方法，使其能够检查用户对象中的多个属性。核心思想是使用逻辑或（||）运算符将多个条件组合起来。

优化后的 TypeScript 组件 (.ts)

首先，将lastname重命名为更通用的searchTerm以反映其多字段搜索的用途。

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];
    }
  }
}

HTML 模板 (.html) 相应修改

将[(ngModel)]="lastname"改为[(ngModel)]="searchTerm"。

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

代码解析与最佳实践

1. allUsuarios 数组的重要性： 为了避免每次搜索时都向后端请求数据，我们引入了一个allUsuarios数组来存储从API获取的原始、完整的用户列表。usuarios数组则用于存储经过过滤后显示在表格中的数据。当搜索关键字为空时，直接将allUsuarios的内容赋值给usuarios即可恢复原始列表，而无需重新调用loadUsers()或ngOnInit()。

2. searchTerm 的使用： 将输入框绑定的变量从lastname改为searchTerm，使其更具通用性，明确表示它是一个用于多字段搜索的通用关键字。

3. 大小写不敏感搜索：toLocaleLowerCase() 方法用于将字符串转换为小写。在比较之前，将搜索关键字和每个字段的值都转换为小写，确保搜索是大小写不敏感的，提升用户体验。

4. includes() 方法：String.prototype.includes() 方法用于判断一个字符串是否包含另一个字符串。这实现了模糊匹配（partial search）。如果需要精确匹配，可以使用===运算符。

5. 逻辑或 (||) 运算符： 通过||运算符连接多个条件，只要任何一个字段包含搜索关键字，该用户就会被包含在过滤结果中。

6. 性能优化（Debouncing）： 对于频繁的键盘输入，每次按键都触发Search()方法可能会导致性能问题。建议使用RxJS的debounceTime操作符来延迟搜索逻辑的执行，直到用户停止输入一段时间（例如300ms）。

   import { Subject } from 'rxjs';
   import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
   
   export class GerenciamentoUsuariosListaComponent implements OnInit, OnDestroy {
     // ... 其他属性 ...
     searchTerm: string = '';
     private searchTerms = new Subject<string>();
     private destroy$ = new Subject<void>(); // 用于管理订阅的生命周期
   
     // ... 构造函数 ...
   
     ngOnInit(): void {
       this.loadUsers();
       this.searchTerms.pipe(
         debounceTime(300), // 等待300ms，防止过于频繁的搜索
         distinctUntilChanged(), // 仅在搜索词发生变化时才触发
         takeUntil(this.destroy$) // 组件销毁时自动取消订阅
       ).subscribe(term => {
         this.SearchLogic(term); // 实际执行搜索逻辑
       });
     }
   
     ngOnDestroy(): void {
       this.destroy$.next();
       this.destroy$.complete();
     }
   
     // HTML input的(input)事件现在调用这个方法
     onSearchInput(event: Event): void {
       const inputElement = event.target as HTMLInputElement;
       this.searchTerm = inputElement.value;
       this.searchTerms.next(this.searchTerm);
     }
   
     SearchLogic(keyword: string) { // 将原Search()的逻辑移到这里
       keyword = keyword.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];
       }
     }
   }

   相应的HTML：

   <input type="text" [(ngModel)]="searchTerm" (input)="onSearchInput($event)"/>

总结

通过上述改进，我们成功地将Angular应用中的单字段过滤功能扩展为多字段动态过滤。这种方法不仅提升了搜索的灵活性和用户体验，而且通过维护原始数据副本和使用防抖技术，优化了性能。在实际项目中，根据数据量和性能要求，还可以考虑更复杂的搜索策略，如使用第三方库、全文搜索索引或将过滤逻辑迁移到服务器端。

今天关于《Angular多字段动态过滤技巧分享》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！