Hi, I've created a filter pipe to search for imagenames and imageids among all my images. However, it seems to only find matches in the first image. There seems to be something wrong with my code.
This is my FilterPipe class in filter.pipe.ts where I have implemented the search method:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(value: any, arg: any): any {
if (arg === '' || arg.length < 1) return value;
const resultPosts = [];
for (const imagen of value) {
if (imagen.name.toLowerCase().indexOf(arg.toLowerCase()) > -1) {
resultPosts.push(imagen);
} else if (imagen.imagenId.toLowerCase().indexOf(arg.toLowerCase()) > -1){
resultPosts.push(imagen);
};
return resultPosts;
}
}
}
In my list.component.html where I have an input field for searching:
<div class="row">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" name="filterImagen" placeholder="Search" [(ngModel)]="filterImagen">
<button class="btn btn-primary my-2 my-sm-0" type="submit">Search</button>
</form>
<div class="col-md-4" *ngFor="let imagen of imagenes | filter:filterImagen; index as i">
//when I look for the imagename or imageid, it just looks if my first image has the name I write on the searchbar
<div class="card mb-3 animated zoomIn">
<h3 class="card-header">{{imagen.name}}</h3>
<div class="card-body">
<h5 class="card-title"><b>ID: </b>{{imagen.imagenId}}</h5>
</div>
<div class="card-body text-center">
<img style="height: 200px; width: 100%; display: block;" src="{{imagen.imagenUrl}}" alt="Card image">
</div>
</div>
</div>
</div>
/* In my list.component.ts, I have declared a variable filter like this: */
imagenes: Imagen[] = [];
filterImagen = ''; //just declared it here
//I already imported my FormsModule on app.module.ts and my classes.