custom pipe array empty

Question

I created this custom pipe:

@Pipe({ name: 'orderBy' })
export class OrderByPipe implements PipeTransform {
     transform(items: any[], orderBy: string): any[] {
        if (items && items.length > 1) {
            console.log('items -> ', items);
        }
        console.log('return -> items -> ', items);
        return items;
     }
 }

I am using it in a component:

<tr *ngFor="let item of items | orderBy:'title'" class="myclass">

The table rows display correctly, but in the pipe the items array length is always zero. The console statement for the return from the pipe shows an array populated with objects. Why does the array appear to be empty?

Is items in your component getting data synchronously or asynchronously? It the latter, add 'async' pipe. — wannadream, May 23 '17 at 19:28
@wannadream no it isnt an observable so async pipe would not be a good idea. — Joe, May 25 '17 at 13:25

score 1 · Accepted Answer · answered Dec 10 '18 at 21:07

Just add parenthesis as shown below. This sends the item to the pipe and the result back to the ngFor loop.

<tr *ngFor="let item of ( items | orderBy:'title')" class="myclass">

See: Angular Offiical Documentation Search for "ngfor" to see examples.

custom pipe array empty

1 Answers1