Angular 4 ngFor pipe not re filter after add an element

Question

I need to use data and sort them by price first the pipe works fine but when I add new element it add it in the last line and not sort them again

<tr *ngFor="let game of gameslist | orderBy: 'amount'" (click)="GameClick(game.id)">...</tr>

my pipe

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'orderBy'
})
export class OrderByPipe implements PipeTransform {

  transform(array: Array<string>, args: string): Array<string> {
    array.sort((a: any, b: any) => {
      if ( a[args] > b[args] ) {
        return -1;
      }else if ( a[args] < b[args] ) {
        return 1;
      }else {
        return 0;
      }
    });
    return array;
  }
}

Before add

after add

Here is a post that discusses pipes and how they work. This should solve your problem. https://stackoverflow.com/questions/34456430/ngfor-doesnt-update-data-with-pipe-in-angular2 — Jason White, Aug 05 '17 at 12:19

score 2 · Accepted Answer · answered Aug 05 '17 at 12:29

2

Solved by add pure: false to the pipe configuration

all thanks to jmw5598

answered Aug 05 '17 at 12:29

Ameer Fakhri

103
1
5

Angular 4 ngFor pipe not re filter after add an element

1 Answers1