Angular2 RC1 Pipes Always Passing Undefined

 

Questions


After upgrading to RC1 from Beta, pipes don’t seem to be correctly passing data. I am receiving the following:

ORIGINAL EXCEPTION: TypeError: Cannot read property '1' of undefined
ORIGINAL STACKTRACE:
TypeError: Cannot read property '1' of undefined

This is an old plunker, but it shows the way I am using pipes within my application. https://plnkr.co/edit/DHLVc0?p=preview

Sometimes I get no errors at all and it treats the page as if there were no pipes whatsoever.

 

 

————————————————-

Answer

On version 2.0.0-beta.16, pipes had breaking changes. From angular2 changelog

pipes now take a variable number of arguments, and not an array that contains all arguments.

So, instead of transform(value, args){} it’s now transform(value,args...){}

before

transform(value, [arg1,arg2,arg3])

Now

transform(value, arg1, arg2, arg3)

If you don’t want to make any changes to your pipes, you could still use them but you need to change the way you add arguments

Before:

{{someValue|somePipe:arg1:arg2}} 

change it to:

{{someValue|somePipe:[arg1,arg2]}} // this will work with the new syntax without changing anything in the pipe itself

Or, the better way, is to change your pipes and make the transform method accepts multiple arguments instead of one array.

Now, going to the plunk on your question:

All you need to make it work with the new versions is to change:

transform(input:any, [config = '+']): any{

To

transform(input:any, config = '+'): any{

And that’s it. Because in your code, you never call the pipe with more than one argument. It’s always an array of arguments, that fits perfectly with the new syntax.

Here is your plunk fixed

angular,angular2-pipe

Facebook Comments

Post a comment