Angular异步数据过滤 筛选指定symbol代币的实现问题

• 逻辑运算符使用错误：你使用了&&（逻辑与）做判断，该运算符要求所有条件同时满足才会判定为真，但单个代币对象的symbol属性只会有一个唯一值，不可能同时等于ETH和BTC，因此判断条件永远不成立，控制台自然没有输出。
• filter方法写法不规范：Array.filter需要回调函数返回布尔值来决定当前元素是否保留到结果数组，你之前的代码只在条件成立时打印日志，没有返回判断值，最终得到的result永远是空数组，拿不到筛选结果。

推荐用集合匹配的写法，后续增减要筛选的币种只需要修改目标数组即可，可维护性更高：

specificTokens(){
  // 配置需要筛选的币种symbol
  const targetSymbols = ['BTC', 'ETH', 'SOL'];
  // 直接返回匹配结果，符合条件的代币会被存入result数组
  const result = this.walletData.filter(item => targetSymbols.includes(item.symbol));
  // 打印验证筛选结果
  console.log('筛选后的指定币种：', result);
  // 若需要在组件其他位置使用该结果，可赋值给组件属性，例：this.filteredTokenList = result
}

如果要使用逻辑运算符实现，需要把&&替换为||（逻辑或），即只要满足任意一个匹配条件就保留对应元素：

specificTokens(){
  const result = this.walletData.filter(item => {
    return item.symbol === "ETH" || item.symbol === "BTC" || item.symbol === "SOL";
  });
  console.log(result);
}

由于walletData是接口异步返回的数据，需要确保specificTokens方法在接口请求完成、walletData完成赋值之后再调用，否则会因为数据未初始化导致筛选结果为空甚至报错。

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