Angular2 pipe dynamic value not taking

debugcn Published at Dev

Maantu Das

I have a json like this

[{
  "id": 9156,
  "slug": "chicken-seekh-wrap",
  "type": "dish",
  "title": "Chicken Seekh Wrap",
  "cuisine_type": [2140]
},
{
  "id": 9150,
  "slug": "green-salad",
  "type": "dish",
  "title": "Green Salad",
  "cuisine_type": [2141]
}]

I created a pipe like this to filter by cuisine type in angular2

@Pipe({
      name: 'filter',
      pure: false
 })
 export class FilterPipe implements PipeTransform {
     transform(items: any[], selectedId: any): any {
     if(selectedId === -1)
           return items;
    return items.filter(item => item.cuisine_type[0] === selectedId);

  }
 }

And in the ionic view I have used it like this

<ion-card *ngFor="let cat of selectedCats">
            <ion-card-header>
              {{cat}}
            </ion-card-header>
            <ion-card-content>
                <ion-list class="checkbox-list" *ngIf="dishes ?.length > 0">
                  <ion-item class="checkbox-item" *ngFor="let dish of dishes | filter:cat">

                    <ion-label>{{dish.title}}</ion-label>
                      <ion-checkbox [formControlName]="dish.id"></ion-checkbox>

                  </ion-item>
                </ion-list>
            </ion-card-content>
</ion-card>

When I am using pipe value as static like its working

 <ion-item class="checkbox-item" *ngFor="let dish of dishes | filter:2140">

but when I am using it dynamically its not showing any result

<ion-item class="checkbox-item" *ngFor="let dish of dishes | filter:cat">

Günter Zöchbauer

The problem is not caused by Angular, but by your code

item.cuisine_type[0] === selectedId

being overly specific about accepted values

item.cuisine_type[0] == selectedId

is more forgiving by allowing type coercion before the comparison.

This means, that cat is probably a string '2140' and item.cuisine_type[0] a number. If you pass it as | filter:2140" it's passed as number and matches item.cuisine_type[0].

Collected from the Internet

Please contact [email protected] to delete if infringement.