I am encountering an issue with a filter that is supposed to search for a specific name and retrieve the data containing that name. However, I am only seeing an error in the browser console, and the page is not displaying as expected.
Here is the HTML code:
<div class="content">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4" style="padding-bottom: 15px;" >
<div class="card_book">
<div class="card">
<div class="card-body text-center">
<form>
<fieldset>
<div class="form-group">
<input type="text" class="form-control" name="filterPost" placeholder="Nombre" [(ngModel)]="filterPost">
<br>
</div>
</fieldset>
</form>
</div></div></div></div></div></div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4" style="padding-bottom: 15px;" *ngFor="let contacts of contacts | filtro:filterPost">
<div class="card_book">
<div class="card">
<div class="card-body text-center">
<h3>Nombre: {{contacts.name}}</h3>
<h5>Edad: {{contacts.number}}</h5>
<h5>Email: {{contacts.email}}</h5>
<h5 class="card-text">Fecha de nacimiento: {{contacts.date}}</h5>
<h6 style="color: red;">Id: {{contacts.id}}</h6>
<button type="button" class="btn btn-primary" (click)="generarPDF()">
<img src="assets/img/descargar.png" alt="DESCARGAR PDF" title="Descargar pdf"> DESCARGAR PDF
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The TypeScript logic is as follows:
filterPost = '';
It seems like the issue might be related to the pipe function. Here is the pipe transformation function:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filtro'
})
export class FiltroPipe implements PipeTransform {
transform(value: any, arg: any): any {
if (arg === '' || arg.length < 3) return value;
const resultPosts = [];
for (const post of value) {
if (post.email.toLowerCase().indexOf(arg.toLowerCase()) > -1) {
resultPosts.push(post);
};
};
return resultPosts;
}
}
This pipe has already been imported into the module, but there still seems to be an error. The Angular module setup looks like this:
import {FormsModule} from '@angular/forms';
import { FiltroPipe } from './pipes/filtro.pipe'
@NgModule({
declarations: [
FiltroPipe,
AppComponent,
SendEmailComponent,
NavbarComponent,
SidebarComponent,
InactivityTimerComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
ReactiveFormsModule,
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFirestoreModule,
AngularFireAuthModule, FormsModule
],
providers: [AuthService, CanPaginaPrincipalGuard, AngularFirestore,DataDbService,
],
bootstrap: [AppComponent]
})
export class AppModule { }