Angular中filtreData函数仅返回单个过滤值，如何返回全部值？

你的问题核心出在filtreData()的循环逻辑里——循环内部直接执行了return语句，导致函数第一次迭代就提前退出，只能拿到单个过滤值。要返回所有符合条件的值，我们需要先收集所有目标值，再统一返回。

修复后的函数实现 #

我们可以用数组的map方法批量提取所有filtreValue，再通过join拼接成适合展示的字符串，同时处理this.filtres为空或undefined的边界情况：

filtreData(): string { 
  // 处理filtres不存在或为空的情况，返回空字符串避免显示奇怪内容
  if (!this.filtres || this.filtres.length === 0) {
    return "";
  }
  // 提取所有filtreValue并拼接成逗号分隔的字符串
  return this.filtres.map(item => item.filtreValue).join(', ');
}

如果需要其他分隔格式（比如空格、顿号），只需要修改join的参数即可，比如join(' ')或join('、')；如果要支持HTML换行，用join('<br>')后，模板里需要用[innerHTML]绑定。

模板中的使用 #

现在模板可以正常展示所有过滤值了：

<ng-template #noResultsSch> 
  <li class="list-group-item example-box"> 
    <h3>No results for "{{filtreData()}}".</h3> 
  </li> 
</ng-template>

额外性能优化建议 #

Angular的变更检测会频繁调用模板里的函数，为了避免不必要的计算，建议把过滤结果缓存到组件属性中，在filtres变化时更新：

filteredValues: string = "";

ngOnInit(): void {
  this.updateFilteredValues();
}

// 当filtres数据更新时调用这个方法
updateFilteredValues(): void {
  if (!this.filtres || this.filtres.length === 0) {
    this.filteredValues = "";
    return;
  }
  this.filteredValues = this.filtres.map(item => item.filtreValue).join(', ');
}

模板直接绑定缓存的属性：

<ng-template #noResultsSch> 
  <li class="list-group-item example-box"> 
    <h3>No results for "{{filteredValues}}".</h3> 
  </li> 
</ng-template>

这样能减少重复计算，提升组件性能，尤其当filtres数据量较大时效果更明显。

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