如何在Angular Mat-Autocomplete中实现Firestore查询结果去重？

要解决重复客户记录的问题，你可以通过在数据返回后添加去重处理实现，核心是基于客户的唯一标识（比如customerBusinessIdent，如果该字段是业务唯一值；无唯一标识时也可组合customerName+customerAddress作为判断依据）过滤重复项。

方法1：在服务层直接处理去重（推荐） #

修改purchaseOrdersService中的searchCustomerDetails方法，在数据转换后添加去重逻辑：

searchCustomerDetails(searchString: string): Observable<CustomerDetails[]> {
  const start = searchString.toLowerCase();
  const end = start.replace(/.$/, (c) =>
    String.fromCharCode(c.charCodeAt(0) + 1)
  );

  return this.firestore
    .collection('purchaseOrders', (ref) =>
      ref
        .where('customerNameLower', '>=', start)
        .where('customerNameLower', '<', end)
    )
    .get()
    .pipe(
      map((results) => {
        // 转换原始数据为CustomerDetails格式
        const customerList = results.docs.map((po) => {
          const data = po.data() as CustomerDetails;
          return {
            customerAddress: data.customerAddress,
            customerBusinessIdent: data.customerBusinessIdent,
            customerBusinessIdentType: data.customerBusinessIdentType,
            customerName: data.customerName,
          };
        });
        
        // 基于唯一标识去重：用Map存储键值对，键为唯一标识，值为客户对象
        const uniqueCustomers = Array.from(
          new Map(customerList.map(cust => [cust.customerBusinessIdent, cust])).values()
        );
        
        // 无唯一标识时，用名称+地址组合作为去重键：
        // const uniqueCustomers = Array.from(
        //   new Map(customerList.map(cust => [`${cust.customerName}-${cust.customerAddress}`, cust])).values()
        // );
        
        return uniqueCustomers;
      })
    );
}

方法2：在组件的Observable管道中添加去重 #

如果不想修改服务层，可在组件的filteredPurchaseOrders管道末尾追加去重逻辑：

this.filteredPurchaseOrders =
  this.purchaseOrderForm.controls.customerName.valueChanges.pipe(
    filter((val) => typeof val !== 'object' && val !== null),
    debounceTime(400),
    switchMap((value) => {
      return this.purchaseOrdersService.searchCustomerDetails(value);
    }),
    // 新增去重处理
    map(customers => {
      return Array.from(
        new Map(customers.map(cust => [cust.customerBusinessIdent, cust])).values()
      );
    })
  );

关键注意事项 #

• 优先使用业务唯一字段作为去重键：比如customerBusinessIdent，避免同名不同客户被误过滤。
• 用Map去重是高效方案：利用Map键的唯一性特性，快速完成去重操作。
• 根源优化建议：如果Firestore中purchaseOrders集合存在大量重复客户数据，建议单独维护customers集合，直接查询该集合获取客户信息，从源头避免重复数据。

内容的提问来源于stack exchange，提问作者Frank Packer