使用多个管道时，Angular 17 为空数据

Question

我使用 Angular 17 和以下代码：

数据库.component.html

@for(user of (users | userPipe:filters); track user.id) {
    <tr id="{{ user.id }}">
        <td>{{ user.name }}</td>
        <td>{{ user.surname }}</td>
        <td>{{ user.age }}</td>
    </tr>
}
@empty {
    <tr>
        <td colspan="3">Empty</td>
    </tr>
}

“filters”是一个带有一些关键字的字符串数组，应该返回任何匹配的数据库条目。

数据库.pipe.ts

@Pipe({
    name: 'userPipe',
    pure: false
})
export class databasePipe implements PipeTransform {
    transform(values: Users[], filters: string[]): Users[] {
        
        if (!filters || filters.length === 0 || values.length === 0) {
            return values;
        }

        return values.filter((value: User) => {
            filters.forEach(filter => {
                const userNameFound = value.name.toLowerCase().indexOf(filter.toLowerCase()) !== -1;
                const userSurnameFound = value.surname.toLowerCase().indexOf(filter.toLowerCase()) !== -1;
                const ageFound = value.age.toLowerCase().indexOf(filter.toLowerCase()) !== -1;

                if (userNameFound || userSurnameFound || ageFound) {
                
                    console.log("value: ", value);
                    return value;
                }
                return "";
            });
        });
    }
}

它正在工作，我可以在浏览器控制台中看到与“值：”匹配的条目，但我的“过滤”表只返回“空”并且没有显示任何数据。

有人知道为什么会发生这种情况吗？

Answer 1

您在

databasePipe

中的过滤逻辑不正确。您不会返回布尔值（谓词）来指示该元素已被选中，而是返回

undefined

（虚假值）。因此，您的表格将显示

@empty

模板。

相反，您应该使用

.some()

，以便在满足任何

true

时返回

filter

。

return values.filter((value: User) => {
  return filters.some((filter) => {
    const userNameFound =
      value.name.toLowerCase().indexOf(filter.toLowerCase()) !== -1;
    const userSurnameFound =
      value.surname.toLowerCase().indexOf(filter.toLowerCase()) !== -1;
    const ageFound =
      value.age.toLowerCase().indexOf(filter.toLowerCase()) !== -1;

    return userNameFound || userSurnameFound || ageFound;
  });
});

演示@StackBlitz