I am currently working with a pipe that I have created. Here is the code:
@Pipe({
name: 'searchNomES'
})
export class SearchNomESPipe implements PipeTransform {
transform(uos: IUo[], name?: string,): IUo[] {
if (!uos) return [];
if (!name) return uos;
name = name.toLocaleLowerCase();
uos = [...uos.filter(uo => uo.nom.toLocaleLowerCase().includes(name))];
return uos;
}
}
When using this pipe in my HTML like so, everything works fine:
<ng-container *cdkVirtualFor="let image of display | async | searchNomES : name " >
</ng-container>
However, when trying to use the pipe in my component.ts file, I encounter an issue. Here is what I tried:
<mat-form-field >
<input matInput
(keyup)="applyFilter2($event.target.value)">
</mat-form-field>
import { SearchNomESPipe } from '../../search-nomES.pipe';
constructor(private espipe: SearchNomESPipe) { }
ngOnInit() {this.display=this.markerservice.getGeos() }
applyFilter2(name : string) {
this.display = this.espipe.transform(this.display,name);
}
This is my service:
getGeos() { return this.
database.list('ES').snapshotChanges().pipe(map(actions => {
return actions.map(a => {
const data = a.payload.val();
const key = a.payload.key;
return {key, ...data };
Unfortunately, running this code gives me the following error:
uos.filter is not a function or its return value is not iterable