Angular 17 - 使用管道时显示空数据

Question

我正在使用 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

是一个字符串数组，其中包含用于过滤匹配的数据库条目的关键字。

数据库.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 "";
            });
        });
    }
}

它正在工作，我可以在浏览器控制台中看到与

value: <value>

匹配的条目，但我的过滤表只返回“空”并且没有显示任何数据。

有谁知道为什么会这样吗？

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

Answer 2

您不能在 forEach 循环内使用 return - 该函数正在执行。

所以，如果你愿意，你应该使用类似的东西

  return values.filter((value: User) => {
      let find=false; //at fisrt not found
      filters.forEach(f => {
          const userNameFound = value.name.toLowerCase().indexOf(f.toLowerCase()) !== -1;
          const userSurnameFound = value.surname.toLowerCase().indexOf(f.toLowerCase()) !== -1;
          const ageFound = value.age.toLowerCase().indexOf(f.toLowerCase()) !== -1;

          //if with a filter we put the value to true
          if (userNameFound || userSurnameFound || ageFound) {
              find= true;
          }
      });
      return find;
    });
  }