I am faced with an issue regarding filtering a table of objects (Bills => Bill => Products => Product) using pipes. The pipe filtering works correctly, but even after the arrays have been filtered, the names (bill.name) are still visible when they do not display any results from the filtering. How can I troubleshoot this problem?
<span class="search-span">
<input [(ngModel)]="searchText" placeholder="Start typing a product name..." class="search-input">
</span>
</div>
<hr>
<ng-container *ngFor="let bill of bills; let i = index">
<div class="col-xs-12" *ngIf="bill.products?.length > 0">
<h5>
{{bill.name}} {{i === 0 ? '(this bill group)' : ''}}
</h5>
</div>
<div class="col-xs-3" *ngFor="let product of bill.products | filter : searchText">
<div [class.selected]="isProductSelected(product)" (click)="selectProduct(product)">
<span class="text">{{product.name}}</span>
</div>
</div>
</ng-container>
Pipe
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(items: any, searchText: string): any {
if (!items) return [];
if (!searchText) return items;
searchText = searchText.toLowerCase();
return items.filter(it => {
return it.name.toLowerCase().includes(searchText);
});
}
}