Angular中实现多条件查询：优化HttpParams与类型定义

getAllCustomersList(currentPage: number, filter: []) {
  let queryParams = new HttpParams();
  queryParams = queryParams.append("page", currentPage);
  queryParams = queryParams.append("name", filter.name); // 错误发生在这里
  return this.httpClient.get<Customers>(`${environment.apiUrl}customers`,{params:queryParams});
}

// customers.ts (或 models/filter-criteria.ts)
export interface CustomerItem {
  // ... 现有 CustomerItem 接口定义
}

export interface Customers {
  // ... 现有 Customers 接口定义
}

// 新增过滤器接口
export interface FilterCriteria {
  name?: string;
  customerId?: number;
  vat?: string;
  database?: string;
  country?: string;
  source?: string;
  // 根据实际需求添加其他过滤字段
}

// 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, FilterCriteria } from '../models/customers'; // 确保路径正确

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

  constructor(private httpClient: HttpClient) { }

  getAllCustomersList(currentPage: number, filter: FilterCriteria): Observable<Customers> {
    let queryParams = new HttpParams();
    queryParams = queryParams.append("page", currentPage.toString()); // currentPage通常是数字，HttpParams值需为字符串

    // 遍历 filter 对象，动态添加非空查询参数
    for (const key in filter) {
      // 确保属性是对象自身的属性，而不是原型链上的
      if (filter.hasOwnProperty(key)) {
        const value = filter[key as keyof FilterCriteria]; // 类型断言
        // 只有当值不为 null, undefined 或空字符串时才添加
        if (value !== null && value !== undefined && value !== '') {
          queryParams = queryParams.append(key, value.toString()); // 确保值转换为字符串
        }
      }
    }

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

// customers.component.ts
import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator, PageEvent } from '@angular/material/paginator';
import { Subscription, Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
import { CustomersService } from '../services/customers.service';
import { CustomerItem, Customers, FilterCriteria } from '../models/customers'; // 确保路径正确

@Component({
  selector: 'app-customers',
  templateUrl: './customers.component.html',
  styleUrls: ['./customers.component.scss']
})
export class CustomersComponent implements OnInit, OnDestroy {
  dataSource = new MatTableDataSource<CustomerItem>();
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  isLoading = false;
  currentPage = 1;
  customerSubscription!: Subscription;

  // 定义一个 FilterCriteria 对象来存储所有过滤器的值
  filterCriteria: FilterCriteria = {};
  private searchTerms = new Subject<void>(); // 用于触发防抖搜索的Subject

  constructor(private customersService: CustomersService) { }

  ngOnInit(): void {
    this.loadData(); // 组件初始化时加载一次数据

    // 订阅 searchTerms Subject，实现防抖和去重
    this.searchTerms.pipe(
      debounceTime(500), // 在最后一次事件触发后等待 500ms
      // distinctUntilChanged() // 如果 filterCriteria 是一个复杂对象，此操作符可能需要自定义比较函数
    ).subscribe(() => {
      this.currentPage = 1; // 任何过滤条件改变时，重置页码到第一页
      this.loadData();
    });
  }

  ngOnDestroy(): void {
    if (this.customerSubscription) {
      this.customerSubscription.unsubscribe();
    }
    this.searchTerms.complete(); // 完成 Subject，防止内存泄漏
  }

  loadData(): void {
    this.isLoading = true;
    this.customerSubscription = this.customersService.getAllCustomersList(this.currentPage, this.filterCriteria)
      .subscribe({
        next: (data: Customers) => {
          this.dataSource.data = data._embedded.customers;
          this.paginator.pageIndex = this.currentPage - 1; // MatPaginator 是 0-indexed，API 是 1-indexed
          this.paginator.length = data.total_items;
          this.isLoading = false;
        },
        error: (err) => {
          console.error('加载客户数据失败:', err);
          this.isLoading = false;
          // 可以在此处显示用户友好的错误消息
        }
      });
  }

  // 当任何过滤输入字段的值发生变化时调用
  onFilterChange(): void {
    this.searchTerms.next(); // 发送事件，触发防抖搜索
  }

  // 处理分页器页面切换事件
  onPageChange(event: PageEvent): void {
    this.currentPage = event.pageIndex + 1; // 更新当前页码
    this.loadData(); // 重新加载数据
  }
}

<!-- 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>
      <input matInput [(ngModel)]="filterCriteria.name" (ngModelChange)="onFilterChange()" placeholder="Name">
    </mat-form-field>
    <mat-form-field appearance="outline">
      <mat-label>Customer ID</mat-label>
      <input matInput type="number" [(ngModel)]="filterCriteria.customerId" (ngModelChange)="onFilterChange()" placeholder="Customer ID">
    </mat-form-field>
    <mat-form-field appearance="outline">
      <mat-label>VAT</mat-label>
      <input matInput [(ngModel)]="filterCriteria.vat" (ngModelChange)="onFilterChange()" placeholder="VAT">
    </mat-form-field>
    <mat-form-field appearance="outline">
      <mat-label>Database</mat-label>
      <input matInput [(ngModel)]="filterCriteria.database" (ngModelChange)="onFilterChange()" placeholder="Database">
    </mat-form-field>
    <mat-form-field appearance="outline">
      <mat-label>Country</mat-label>
      <input matInput [(ngModel)]="filterCriteria.country" (ngModelChange)="onFilterChange()" placeholder="Country">
    </mat-form-field>
    <mat-form-field appearance="outline">
      <mat-label>Source</mat-label>
      <input matInput [(ngModel)]="filterCriteria.source" (ngModelChange)="onFilterChange()" placeholder="Source">
    </mat-form-field>
  </mat-toolbar-row>
</mat-toolbar>
<div class="table-container">
  <table mat-table [dataSource]="dataSource">
    <!-- ... 您的表格行和列定义 ... -->
  </table>
  <!-- 添加分页器 -->
  <mat-paginator [pageSizeOptions]="[10, 25, 50]" showFirstLastButtons (page)="onPageChange($event)"></mat-paginator>
</div>