Angular 应用中多查询参数过滤的实现指南

// src/app/models/filter.interface.ts (可以创建单独的文件)
export interface CustomerFilter {
  name?: string; // 允许为空，表示该字段是可选的
  customerId?: number;
  vat?: string;
  country?: string;
  // 根据您的实际需求添加更多过滤字段
}

// src/app/services/customers.service.ts
import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { Customers } from '../models/customers'; // 假设您已定义 Customers 接口
import { CustomerFilter } from '../models/filter.interface'; // 导入过滤接口

@Injectable({
  providedIn: 'root'
})
export class CustomersService {

  constructor(private httpClient: HttpClient) { }

  getAllCustomersList(currentPage: number, filter: CustomerFilter): Observable<Customers> {
    let queryParams = new HttpParams();
    queryParams = queryParams.append("page", currentPage.toString()); // 页码通常是数字，但HttpParams接受字符串

    // 遍历 filter 对象，动态添加非空的过滤参数
    if (filter.name) {
      queryParams = queryParams.append("name", filter.name);
    }
    if (filter.customerId) {
      queryParams = queryParams.append("customer_id", filter.customerId.toString());
    }
    if (filter.vat) {
      queryParams = queryParams.append("vat", filter.vat);
    }
    if (filter.country) {
      queryParams = queryParams.append("country", filter.country);
    }
    // ... 添加其他过滤字段

    return this.httpClient.get<Customers>(`${environment.apiUrl}customers`, { params: queryParams });
  }
}

// src/app/customers/customers.component.ts
import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { Subscription, Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; // 导入防抖和去重操作符

import { CustomerItem, Customers } from '../models/customers';
import { CustomerFilter } from '../models/filter.interface'; // 导入过滤接口
import { CustomersService } from '../services/customers.service';

@Component({
  selector: 'app-customers',
  templateUrl: './customers.component.html',
  styleUrls: ['./customers.component.css']
})
export class CustomersComponent implements OnInit, OnDestroy {

  dataSource = new MatTableDataSource<CustomerItem>();
  isLoading = false;
  currentPage = 1;
  customerSubscription: Subscription = new Subscription();
  @ViewChild(MatPaginator) paginator!: MatPaginator;

  // 定义一个 Subject 用于处理输入事件，实现防抖
  private filterInput$: Subject<{ key: keyof CustomerFilter, value: string | number }> = new Subject();

  // 组件内部维护当前的过滤状态
  currentFilter: CustomerFilter = {};

  constructor(private customersService: CustomersService) { }

  ngOnInit(): void {
    this.loadData(this.currentFilter); // 初始加载数据

    // 订阅 filterInput$ Subject，实现防抖和去重
    this.filterInput$.pipe(
      debounceTime(300), // 在300ms内没有新输入时才触发
      distinctUntilChanged((prev, curr) => prev.key === curr.key && prev.value === curr.value) // 只有当键或值实际改变时才触发
    ).subscribe(filterChange => {
      // 更新 currentFilter 对象
      this.currentFilter = {
        ...this.currentFilter, // 保留现有过滤条件
        [filterChange.key]: filterChange.value // 更新当前改变的过滤条件
      };
      this.currentPage = 1; // 过滤条件改变时重置页码
      this.loadData(this.currentFilter); // 重新加载数据
    });
  }

  ngOnDestroy(): void {
    if (this.customerSubscription) {
      this.customerSubscription.unsubscribe();
    }
    this.filterInput$.complete(); // 完成 Subject
  }

  loadData(filter: CustomerFilter) {
    this.isLoading = true;
    this.customerSubscription = this.customersService.getAllCustomersList(this.currentPage, filter).subscribe(
      data => {
        this.dataSource.data = data["_embedded"]["customers"];
        setTimeout(() => {
          this.paginator.pageIndex = this.currentPage - 1; // paginator pageIndex 是从0开始
          this.paginator.length = data.total_items;
        });
        this.isLoading = false;
      },
      error => {
        console.error('Error loading customers:', error);
        this.isLoading = false;
      }
    );
  }

  // 处理单个过滤输入框的改变事件
  onFilterChange(event: Event, filterKey: keyof CustomerFilter) {
    const value = (event.target as HTMLInputElement).value;
    this.filterInput$.next({ key: filterKey, value: value });
  }

  // 处理分页器改变事件
  onPageChange(event: any) {
    this.currentPage = event.pageIndex + 1; // paginator pageIndex 从0开始，API页码通常从1开始
    this.loadData(this.currentFilter);
  }
}

<!-- src/app/customers/customers.component.html -->
<mat-toolbar class="crm-filters-toolbar mat-elevation-z8">
  <mat-toolbar-row>
    <span>Filter</span>
  </mat-toolbar-row>
  <mat-toolbar-row>
    <mat-form-field appearance="outline">
      <mat-label>Name</mat-label>
      <!-- 绑定 name 过滤字段 -->
      <input matInput (keyup)="onFilterChange($event, 'name')" placeholder="Name">
    </mat-form-field>
    <mat-form-field appearance="outline">
      <mat-label>Customer ID</mat-label>
      <!-- 绑定 customerId 过滤字段 -->
      <input matInput (keyup)="onFilterChange($event, 'customerId')" placeholder="Customer ID" type="number">
    </mat-form-field>
    <mat-form-field appearance="outline">
      <mat-label>VAT</mat-label>
      <!-- 绑定 vat 过滤字段 -->
      <input matInput (keyup)="onFilterChange($event, 'vat')" placeholder="VAT">
    </mat-form-field>
    <mat-form-field appearance="outline">
      <mat-label>Country</mat-label>
      <!-- 绑定 country 过滤字段 -->
      <input matInput (keyup)="onFilterChange($event, 'country')" placeholder="Country">
    </mat-form-field>
    <!-- ... 其他过滤输入框 -->
  </mat-toolbar-row>
</mat-toolbar>
<div class="table-container">
  <table mat-table [dataSource]="dataSource">
    <!-- table rows and columns... -->
  </table>
  <mat-paginator [pageSizeOptions]="[10, 25, 50]" showFirstLastButtons (page)="onPageChange($event)"></mat-paginator>
</div>