Angular 17使用自定义Pipe后表格显示空数据求助

问题核心原因 #

你的userPipe管道逻辑存在两个关键问题，导致过滤后的数组始终为空：

1. Array.filter回调未返回有效布尔值
   你在filter的回调里使用filters.forEach()遍历关键词，但forEach的返回值永远是undefined，且内部的return仅终止当前循环，不会将匹配结果传递给外层的filter回调。这使得filter的回调默认返回undefined（等价于false），所有用户条目都被过滤掉，最终表格触发@empty分支。

2. age属性的类型处理隐患
   如果user.age是数字类型，直接调用toLowerCase()会抛出错误。虽然当前控制台能输出匹配结果，推测你的age存储为字符串，但这个问题需要修正以避免后续崩溃。

修正后的管道代码 #

@Pipe({
    name: 'userPipe',
    pure: false
})
export class DatabasePipe implements PipeTransform { // 类名遵循TS大驼峰规范
    transform(values: User[], filters: string[]): User[] { // 修正类型为User[]
        
        if (!filters || filters.length === 0 || !values || values.length === 0) {
            return values || [];
        }

        // 提前统一转换关键词为小写，减少重复计算
        const lowerCaseFilters = filters.map(filter => filter.toLowerCase());

        return values.filter(user => {
            // 使用some()判断用户是否匹配任意一个关键词
            return lowerCaseFilters.some(filter => {
                const nameMatch = user.name.toLowerCase().includes(filter);
                const surnameMatch = user.surname.toLowerCase().includes(filter);
                // 统一将age转为字符串，兼容数字/字符串类型
                const ageMatch = String(user.age).toLowerCase().includes(filter);

                return nameMatch || surnameMatch || ageMatch;
            });
        });
    }
}

关键修正点说明 #

• 替换forEach为some()：some()会在找到第一个匹配项时立即返回true，完美适配“匹配任意关键词即保留用户”的需求，同时直接给filter回调提供有效布尔值。
• 优化大小写转换：提前将所有过滤关键词转为小写，避免在循环中重复执行转换操作，提升性能。
• 兼容age类型：用String(user.age)将数字类型的age转为字符串，避免调用toLowerCase()时出错。
• 规范代码风格：修正类名和类型定义，增加空值判断，提升代码健壮性。

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