Angular 14中如何实现嵌套数组对象的用户信息筛选？

第一步：修复类型访问问题 #

因为你的IMerchant接口未定义userLists字段，直接访问merchant.userLists会触发类型错误。推荐通过扩展接口的方式实现类型安全，而非使用any断言：

// 原有的IMerchant接口
interface IMerchant {
  id: number;
  name: string;
  // 其他原有字段
}

// 扩展接口，添加userLists字段
interface MerchantWithUsers extends IMerchant {
  userLists: IUser[];
}

// 用户数据接口
interface IUser {
  firstName: string;
  lastName: string;
  email: string;
  // 其他用户字段
}

在组件中，将从API获取的商家列表声明为MerchantWithUsers[]类型，确保类型校验通过：

merchants: MerchantWithUsers[] = [];
// 搜索框绑定变量
searchFirstName = '';
searchLastName = '';
searchEmail = '';

第二步：重写筛选方法 #

根据你的需求，提供两种常见实现：

实现1：直接返回所有符合条件的用户列表

如果需要将所有商家中匹配的用户汇总成一个列表：

filteredUsers: IUser[] = [];

onMerchantUserSearch(): void {
  // 预处理搜索关键词：去空格、转小写，实现不区分大小写匹配
  const firstNameKeyword = this.searchFirstName.trim().toLowerCase();
  const lastNameKeyword = this.searchLastName.trim().toLowerCase();
  const emailKeyword = this.searchEmail.trim().toLowerCase();

  this.filteredUsers = [];

  this.merchants.forEach(merchant => {
    // 兜底处理：避免userLists为undefined/null导致报错
    const targetUsers = merchant.userLists || [];
    
    const matchedUsers = targetUsers.filter(user => {
      // 每个字段的匹配逻辑：关键词为空则默认匹配，否则检查是否包含关键词
      const matchFirstName = firstNameKeyword 
        ? user.firstName.toLowerCase().includes(firstNameKeyword) 
        : true;
      const matchLastName = lastNameKeyword 
        ? user.lastName.toLowerCase().includes(lastNameKeyword) 
        : true;
      const matchEmail = emailKeyword 
        ? user.email.toLowerCase().includes(emailKeyword) 
        : true;

      // 三个条件同时满足才保留该用户
      return matchFirstName && matchLastName && matchEmail;
    });

    this.filteredUsers.push(...matchedUsers);
  });
}

实现2：保留商家结构，仅显示每个商家中匹配的用户

如果需要维持商家层级，只展示每个商家下符合条件的用户：

filteredMerchants: MerchantWithUsers[] = [];

onMerchantUserSearch(): void {
  const firstNameKeyword = this.searchFirstName.trim().toLowerCase();
  const lastNameKeyword = this.searchLastName.trim().toLowerCase();
  const emailKeyword = this.searchEmail.trim().toLowerCase();

  this.filteredMerchants = this.merchants
    .map(merchant => {
      const targetUsers = merchant.userLists || [];
      const matchedUsers = targetUsers.filter(user => {
        const matchFirstName = firstNameKeyword 
          ? user.firstName.toLowerCase().includes(firstNameKeyword) 
          : true;
        const matchLastName = lastNameKeyword 
          ? user.lastName.toLowerCase().includes(lastNameKeyword) 
          : true;
        const matchEmail = emailKeyword 
          ? user.email.toLowerCase().includes(emailKeyword) 
          : true;

        return matchFirstName && matchLastName && matchEmail;
      });
      // 返回新的商家对象，替换userLists为筛选后的结果
      return { ...merchant, userLists: matchedUsers };
    })
    // 过滤掉没有匹配用户的商家（可选）
    .filter(merchant => merchant.userLists.length > 0);
}

关键注意事项 #

• 空值兜底：始终处理userLists为undefined或null的情况，避免运行时报错。
• 不区分大小写：将关键词和用户字段统一转小写，提升搜索体验。
• 类型安全：使用扩展接口而非any，确保编译期类型校验，减少潜在bug。

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