如何在Angular 11的NG-ZORRO nz-table组件中实现输入即搜的即时搜索功能

以下是两种不同业务场景下的可落地实现方案：

1. 模板层代码 #

不管是哪种搜索方案，模板层的基础写法一致：

<!-- 搜索输入框 -->
<nz-input-group nzSearch nzSize="default">
  <input 
    type="text" 
    nz-input 
    placeholder="输入关键词即时搜索"
    [(ngModel)]="searchKeyword"
    (input)="onSearchInput()"
  />
  <ng-template #suffix>
    <span nz-icon nzType="search"></span>
  </ng-template>
</nz-input-group>

<!-- nz-table 表格组件，原有列逻辑无需修改 -->
<nz-table 
  [nzData]="displayList" 
  [nzLoading]="loading"
  [nzFrontPagination]="false"
>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>地址</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of displayList">
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
      <td>{{ item.address }}</td>
    </tr>
  </tbody>
</nz-table>

2. 逻辑层实现 #

场景1：前端本地搜索（数据量<1000条，全量数据已加载到前端） #

适合数据量小、不需要分页的场景，直接在前端做过滤即可：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-table-demo',
  templateUrl: './table-demo.component.html'
})
export class TableDemoComponent implements OnInit {
  originList: any[] = []; // 存储全量原始数据，不会被搜索修改
  displayList: any[] = []; // 表格实际渲染的数据源
  searchKeyword = '';
  loading = false;

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

  // 模拟获取全量数据的接口请求
  loadFullData(): void {
    this.loading = true;
    setTimeout(() => {
      // 替换为实际接口返回的全量数据
      this.originList = [
        { name: '张三', age: 18, address: '北京市朝阳区' },
        { name: '李四', age: 22, address: '上海市浦东新区' },
        { name: '王五', age: 30, address: '广州市天河区' }
      ];
      this.displayList = [...this.originList];
      this.loading = false;
    }, 600);
  }

  // 输入框触发搜索逻辑
  onSearchInput(): void {
    const keyword = this.searchKeyword.trim().toLowerCase();
    // 关键词为空时返回全量数据
    if (!keyword) {
      this.displayList = [...this.originList];
      return;
    }
    // 自定义匹配规则，可按需调整需要搜索的字段
    this.displayList = this.originList.filter(item => {
      return item.name.toLowerCase().includes(keyword) || 
             item.address.toLowerCase().includes(keyword);
    });
  }
}

场景2：后端接口搜索（数据量大、需要分页的场景） #

适合数据量较大的业务，搜索逻辑交给后端处理，前端加防抖避免频繁请求：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { debounceTime, Subject, takeUntil } from 'rxjs';

@Component({
  selector: 'app-table-demo',
  templateUrl: './table-demo.component.html'
})
export class TableDemoComponent implements OnInit, OnDestroy {
  displayList: any[] = [];
  searchKeyword = '';
  loading = false;
  private search$ = new Subject<string>();
  private destroy$ = new Subject<void>();

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    // 配置300ms防抖，输入过程中不会频繁触发请求
    this.search$.pipe(
      debounceTime(300),
      takeUntil(this.destroy$)
    ).subscribe(keyword => {
      this.requestSearchData(keyword);
    });
  }

  onSearchInput(): void {
    this.search$.next(this.searchKeyword.trim());
  }

  // 请求后端搜索接口
  requestSearchData(keyword: string): void {
    this.loading = true;
    // 替换为实际业务接口，可同时传入分页参数
    this.http.post('/api/table/list', { keyword }).subscribe((res: any) => {
      this.displayList = res.data;
      // 有分页的话同步更新分页总数、当前页等参数即可
      this.loading = false;
    });
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

注意事项 #

• 如果使用nz-table自带的前端分页，必须关闭nzFrontPagination配置，自行控制nzData数据源，避免搜索和分页逻辑冲突
• 匹配规则可按需自定义，比如仅匹配单个字段、区分大小写、精准匹配等

内容的提问来源于stack exchange，提问作者Virender Thakur