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
– wannadream, Commented May 23, 2017 at 19:28
@wannadream no it isnt an observable so async pipe would not be a good idea. — Joe
– Joe, Commented May 25, 2017 at 13:25

John Considine · Accepted Answer · 2018-12-10 21:07:03Z

1

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.

answered Dec 10, 2018 at 21:07

John Considine

461 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

custom pipe array empty

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related