Angular应用中构建动态查询参数与多条件筛选教程

import { HttpParams } from '@angular/common/http';

// 初始创建一个空的HttpParams实例
let queryParams = new HttpParams();

// 每次append都会返回一个新的HttpParams实例
queryParams = queryParams.append('page', '1');
queryParams = queryParams.append('limit', '10');
// 此时，queryParams是一个包含'page=1&limit=10'的新实例

// customers.ts (或单独的interfaces.ts文件)

export interface CustomerFilter {
  name?: string;
  customerId?: number; // 假设对应html中的Customer ID
  vat?: string;
  database?: string;
  country?: string;
  source?: string;
  // 根据实际的8个输入字段添加更多属性
}

export interface CustomerItem {
  customer_id: number;
  company_id: number;
  name: string;
  name2: string;
  address: string;
  post_code: number;
  city: string;
  country_code: string;
  country_name: string;
  phone: string;
  email: string;
  account: string;
  mailing: string;
  sso: string;
  is_customer: string;
  is_vendor: string;
  vat_liable: string;
  vat_number: string;
  date_update: string;
  tags: string;
  _links: {
    self: {
      href: string;
    }
  }
}

export interface Customers {
  _links: {
    first: {
      href: string;
    };
    last: {
      href: string;
    };
    next: {
      href: string;
    }
    self: {
      href: string;
    };
  };
  _embedded: {
    customers: CustomerItem[]
  };
  page: number;
  page_count: number;
  page_size: number;
  total_items: number;
}

// customers.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment'; // 假设环境配置
import { Customers, CustomerFilter } from '../models/customers'; // 引入接口

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

  constructor(private httpClient: HttpClient) { }

  /**
   * 获取客户列表，支持分页和多条件筛选
   * @param currentPage 当前页码
   * @param filter 筛选条件对象
   * @returns 包含客户数据的Observable
   */
  getAllCustomersList(currentPage: number, filter: CustomerFilter): Observable<Customers> {
    let queryParams = new HttpParams();
    queryParams = queryParams.append('page', currentPage.toString()); // 页码始终添加

    // 动态添加筛选参数
    for (const key in filter) {
      if (filter.hasOwnProperty(key)) {
        const value = filter[key as keyof CustomerFilter]; // 类型断言以正确访问属性
        if (value !== null && value !== undefined && value !== '') { // 检查值是否有效
          queryParams = queryParams.append(key, String(value)); // 将值转换为字符串
        }
      }
    }

    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 } from '@angular/material/paginator';
import { Subscription, Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
import { CustomersService } from '../services/customers.service';
import { CustomerItem, CustomerFilter } 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>();
  isLoading = false;
  currentPage = 1;
  pageSize = 10; // 可配置每页显示数量
  totalItems = 0;

  @ViewChild(MatPaginator) paginator!: MatPaginator;

  private customerSubscription!: Subscription;
  private filterSubject = new Subject<CustomerFilter>(); // 用于防抖的Subject

  // 维护当前筛选状态的对象
  currentFilter: CustomerFilter = {};

  constructor(private customersService: CustomersService) { }

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

    // 订阅filterSubject，并应用防抖和去重操作符
    this.filterSubject.pipe(
      debounceTime(300), // 300毫秒内没有新的输入则触发
      distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)) // 只有筛选条件真正改变时才触发
    ).subscribe(filter => {
      this.currentPage = 1; // 筛选条件变化时重置页码
      this.loadData(filter);
    });
  }

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

  /**
   * 加载客户数据
   * @param filter 筛选条件对象
   */
  loadData(filter: CustomerFilter): void {
    this.isLoading = true;
    this.customerSubscription = this.customersService.getAllCustomersList(this.currentPage, filter).subscribe(
      data => {
        this.dataSource.data = data._embedded.customers;
        this.totalItems = data.total_items;
        this.paginator.length = data.total_items;
        this.paginator.pageIndex = this.currentPage - 1; // MatPaginator的pageIndex从0开始
        this.isLoading = false;
      },
      error => {
        console.error('Error fetching customers:', error);
        this.isLoading = false;
        // 错误处理逻辑
      }
    );
  }

  /**
   * 处理筛选输入框的变更事件
   * @param event DOM事件对象
   * @param filterKey 对应的筛选属性键
   */
  onFilterChange(event: Event, filterKey: keyof CustomerFilter): void {
    const inputElement = event.target as HTMLInputElement;
    const value = inputElement.value.trim();

    // 更新currentFilter对象
    if (value) {
      this.currentFilter[filterKey] = value;
    } else {
      delete this.currentFilter[filterKey]; // 如果值为空，则从筛选对象中移除该属性
    }

    // 将更新后的筛选对象推送到filterSubject，触发防抖逻辑
    this.filterSubject.next({ ...this.currentFilter }); // 传递副本以确保distinctUntilChanged正常工作
  }

  /**
   * 处理分页器页码变更事件
   * @param event MatPageEvent对象
   */
  onPageChange(event: any): void {
    this.currentPage = event.pageIndex + 1;
    this.pageSize = event.pageSize;
    this.loadData(this.currentFilter);
  }
}

<!-- 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, email...</mat-label>
      <!-- 绑定到 name 属性 -->
      <input matInput (keyup)="onFilterChange($event, 'name')" [value]="currentFilter.name || ''" placeholder="Name, email...">
    </mat-form-field>
    <mat-form-field appearance="outline">
      <mat-label>Customer ID</mat-label>
      <!-- 绑定到 customerId 属性 -->
      <input matInput (keyup)="onFilterChange($event, 'customerId')" [value]="currentFilter.customerId || ''" type="number" placeholder="Customer ID">
    </mat-form-field>
    <mat-form-field appearance="outline">
      <mat-label>VAT</mat-label>
      <!-- 绑定到 vat 属性 -->
      <input matInput (keyup)="onFilterChange($event, 'vat')" [value]="currentFilter.vat || ''" placeholder="VAT">
    </mat-form-field>
    <mat-form-field appearance="outline">
      <mat-label>Database</mat-label>
      <!-- 绑定到 database 属性 -->
      <input matInput (keyup)="onFilterChange($event, 'database')" [value]="currentFilter.database || ''" placeholder="Database">
    </mat-form-field>
    <mat-form-field appearance="outline">
      <mat-label>Country</mat-label>
      <!-- 绑定到 country 属性 -->
      <input matInput (keyup)="onFilterChange($event, 'country')" [value]="currentFilter.country || ''" placeholder="Country">
    </mat-form-field>
    <mat-form-field appearance="outline">
      <mat-label>Source</mat-label>
      <!-- 绑定到 source 属性 -->
      <input matInput (keyup)="onFilterChange($event, 'source')" [value]="currentFilter.source || ''" placeholder="Source">
    </mat-form-field>
    <!-- 其他筛选输入字段类似添加 -->
  </mat-toolbar-row>
</mat-toolbar>
<div class="table-container">
  <table mat-table [dataSource]="dataSource">
    <!-- table rows and columns... -->
  </table>
  <mat-paginator [length]="totalItems" [pageSize]="pageSize" [pageSizeOptions]="[5, 10, 25, 100]"
                 (page)="onPageChange($event)" showFirstLastButtons>
  </mat-paginator>
</div>