CODEWITHSUNDEEP
angular
Progs
Progs

Reputation: 737

Angular2 pipe does filter but doesn't show at all

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?

Upvotes: 1

Views: 141

Answers (1)

Christopher Moore
Christopher Moore

Reputation: 3099

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.

Upvotes: 1

Related Questions