Custom pipe doesn't work properly in Angular2

Question

The pipe has to sort an array of objects by the name property.

sort-by.pipe.ts:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'sortBy'
})
export class SortByPipe implements PipeTransform {
  private name: string;

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

app.component.html:

 <table>
    <tr *ngFor="let elem of _values | sortBy">
      <td>{{ elem.name }}</td>
      <td>{{ elem.ts }}</td>
      <td>{{ elem.value }}</td>
    </tr>
  </table>

app.module.ts:

//other imports
import { SortByPipe } from './sort-by.pipe';

@NgModule({
  declarations: [
    SortByPipe
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: []
})
export class AppModule { }

The array of objects:

[{
  "name": "t10",
  "ts": 1476778297100,
  "value": "32.339264",
  "xid": "DP_049908"
}, {
  "name": "t17",
  "ts": 1476778341100,
  "value": "true",
  "xid": "DP_693259"
}, {
  "name": "t16",
  "ts": 1476778341100,
  "value": "true",
  "xid": "DP_891890"
}];

It doesn't sort the objects properly, but also doesn't throw any errors.
Maybe there's something wrong with my files?

Any help appreciated!

Maybe what you want is to do an integer compare.. Read this http://stackoverflow.com/questions/5630123/javascript-string-integer-comparisons — Pablo Matias Gomez, Dec 13 '16 at 15:47
I think the problem is in you "ngFor" you are pipin the elements.. not the array — Pablo Matias Gomez, Dec 13 '16 at 15:50

score 1 · Answer 1 · answered Dec 13 '16 at 16:15

1

The problem is that you are piping the elements and not the array itself.

You should change this

<tr *ngFor="let elem of _values | sortBy">

to this:

<tr *ngFor="let elem of (_values | sortBy)">

answered Dec 13 '16 at 16:15

Pablo Matias Gomez

6,614
7
38
72

@H.Doe whats the result that you are getting? – Pablo Matias Gomez Dec 13 '16 at 16:28
It just doesnt sort the array. But I think that the problem is lying somewhere else. The sorting function which ive implemented basically doesnt work. It doesnt sort these properties at all. – Dec 13 '16 at 16:36
I've tested the sort function with the data you posted and works fine for me. Maybe you can put some `console.log`'s to see what happens or even better, debug it. – Pablo Matias Gomez Dec 13 '16 at 16:38
When I `console.log` the variable its still unsorted. – Dec 13 '16 at 17:05
This works, previously I had an issue that the _values weren't passed to my pipe filter function. This does exactly that! Sounds like others have an issue with their pipe filter function. – Ben Petersen Mar 16 '17 at 15:57

Wouter Vanherck · Answer 2 · 2017-05-10T10:09:25.397

0

Have you tried adding pure: false?

This makes it so that Angular doesn't care if the input is changed or not

@Pipe({
  name: "sort",
  pure: false
})

edited May 10 '17 at 10:09

answered May 10 '17 at 09:06

Wouter Vanherck

2,070
3
27
41

Custom pipe doesn't work properly in Angular2

2 Answers2