Angular如何实现单个输入框同时筛选邮政编码与城市名称

错误原因 #

现有代码通过两个链式map先后执行筛选，第一次仅保留匹配城市名的结果，第二次在第一次的筛选结果中仅保留匹配邮政编码的结果，等价于要求地址同时满足城市名和邮政编码匹配，不符合你要的「任意一项匹配即可」的需求。

修正后代码 #

仅需将两个筛选条件合并到同一次filter中，用逻辑或||连接即可，同时提前预处理关键词避免重复计算，优化执行效率：

FilterChanged(){
    // 提前统一处理筛选关键词，避免循环中重复计算
    const filterVal = this.adressFilter?.trim().toLowerCase() ?? '';
    this.personsFiltered = of(this.persons).pipe(
      map(p => !filterVal ? p : p.filter((i: any) => 
        // 城市名匹配 或 邮政编码匹配，满足其一即可
        i.ort?.toLowerCase().includes(filterVal) 
        || i.plz?.toLowerCase().includes(filterVal)
      )),
      map(p => p.slice(0, 30))
    )
}

输入框HTML代码无需修改。

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