I am currently utilizing Angular 17 with the code provided below:
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 contains a string array that holds keywords used for filtering database entries.
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 "";
});
});
}
}
The functionality works as expected and I can observe matched entries in the browser console using value: <value>. However, despite this, my filtered table only displays "Empty" without any data shown. Do you happen to know the reason behind this issue?