CODEWITHSUNDEEP
htmlangularpipengfor
Jorge De La Vega Carrasco
Jorge De La Vega Carrasco

Reputation: 65

Angular filter posts using pipes

I'm trying to filter posts of a table in Angular using pipes, but I keep getting on the console this error: core.js:12689 Can't bind to 'ngForFilter' since it isn't a known property of 'a'.

I think the error is on filter: filterPost, but dont know how to fix it. Any clue?

My html code is the following. 

<div class="form-group">
    <label for="exampleFormControlInput1">Busca un reporte</label>
    <input type="text" class="form-control" id="exampleFormControlInput1" name="filterPost" placeholder="Busca.." [(ngModel)]="filterPost">
  </div>
<a *ngFor="let report of All_reports | paginate: { itemsPerPage: 10, currentPage: actualPage }; let i = index; 
filter: filterPost" class="list-group-item list-group-item-action flex-column align-items-start" [routerLink]="['/reporte-admin']" 
routerLinkActive="router-link-active" (click)="onSubmit(report._id)">

    <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">Reporte #: {{report._id}}</h5>
        <small>{{i+1}}</small>
    </div>
      <p class="mb-1">Comentario: {{report.comentario}}</p>
      <small class="text-muted">Nombre: {{report.nombre}} {{report.apellido}}</small>
</a>
<br>

This is my filter.pipe.ts code:

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(value: any, arg: any): any {
    const resultPosts = [];
    for(const report of value){
      if(report._id.indexOf(arg) > -1){
        resultPosts.push(report);
      };
    };
    return resultPosts;
  }

}

Upvotes: 0

Views: 154

Answers (1)

M A Salman
M A Salman

Reputation: 3820

Pipe operator "|" expects some value to the left of it. In your case, you added the pipe operator at the end after let i=index;

I believe you should do something like this

*ngFor="let report of All_reports | paginate: { itemsPerPage: 10, currentPage: actualPage } | filter: filterPost; let i = index;"

and also dont forget to add in declarations in app module

Upvotes: 1

Related Questions