Angular2 pipe does filter but doesn't show at all

Question

I'm using the code from this answer Angular 2 - ngFor index after a pipe, but my problem now is that actually i get the items filtered but not the text itself, in my page i just see some empty divs. If select one of the items i can see in another div all the details of the selected item.

my pipe code:

@Pipe({
  name: 'appFilter',
  pure: false
})

export class AppFilterPipe implements PipeTransform {
  transform(values: any[], arg1: any, arg2: any): any {

    return values.reduce((acc, value, index) => 
       value[arg1] == arg2 ? [...acc, { index, value }] : acc, []);
  }
}

the html where the objects get filtered:

<div (click)="showComentario(fc.index);" 
      class="comentario" 
      *ngFor="let fc of comentarios | appFilter:'fav':1">
    {{fc.comment}}
    <div [ngClass]="setCss(fc.sentimient)"></div>
</div>

What is happening that i can't see the text of the filtered items?

it's an array of objects, like this : ` [{"comment_new": 1, "request": "2016-12-22T22:31:35.499Z", "fav": 0, "comment": "some opinion from internet", "id": "a014546c-4ab1-4f13-b614-881fd0942c5d"}]` — Progs

Christopher Moore Christopher Moore · Accepted Answer · 2017-05-17T16:13:17

You need to access the comment using the newly created object which you are adding an index to:

{{ fc.value.comment }}

In your pipe you aren't doing a pure filter. What goes in the pipe isn't the exact same object which comes out.

This is because you are turning an object that looks like this:

{
  fav: '1',
  comment: 'abc'
}

Into this after the pipe:

{
  index: 0,
  value: {
    fav: '1',
    comment: 'abc'
  }
}

Another option

If you really want to keep the index value, but don't want the additional depth, you can use the Object Spread Operator in your pipe

[...acc, { index, ...value }]

This will create a flat object for you, but it isn't in the most recent version of ECMAScript yet.

Angular2 pipe does filter but doesn't show at all

1 Answers