我正在使用angular 17,代码如下:

database.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"是一个带有一些关键字的字符串数组,应该返回任何匹配的数据库条目.

Database.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 "";
            });
        });
    }
}

它正在工作,我可以在浏览器控制台中看到带有"值:"的匹配条目,但我的"过滤"表只返回"Empty"并且没有显示任何数据.

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

推荐答案

您的databasePipe中的过滤器逻辑不正确.您不会返回布尔值(断言)来指示该元素已被 Select ,而是返回undefined(假值).因此,您的表格将显示@empty模板.

相反,您应该使用.some(),以便在满足任何filter时返回true.

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;
  });
});

Demo @ StackBlitz

Angular相关问答推荐

我使用Ngrx的子集 Select 器不起作用

如何在自定义验证器中获取所有表单控件(字段组动态创建)

声明Angular material 中按钮的自定义 colored颜色

独立Angular 零部件不在辅零部件或共享零部件中工作

选中/取消选中-复选框未正确返回TRUE或FALSE

Angular 16独立依赖注入问题

当我更新S显示的数据时,为什么我的垫表用户界面没有更新?

Angular react 形式验证问题

在Angular 17的本地服务应用程序时禁用SSR

RxJS轮询+使用退避策略重试

如何以Angular 解析表单控件名称的无值访问器?

一次重定向后,所有子路由都处于活动状态

错误:在工作区外运行 Angular CLI 时,此命令不可用

如何在 Angular 2 中使用 protractor ?

ViewChild 和 ContentChild 的所有有效 Select 器是什么?

RxJS:takeUntil() Angular 组件的 ngOnDestroy()

Lint 错误:实现生命周期挂钩接口

如何在 Angular 2 中动态添加和删除表单字段

Angular 2 中的动态模板 URL

@viewChild 不工作 - 无法读取未定义的属性 nativeElement