Typescript (Ionic 3/Angular) string replace url

0
votes

Trying to get this easy thing working but can't find it out...

I've got this url that looks like this:

https://website.com/image{width}x{height}.jpg

Now I need to replace the {width} and the {height} values.

I tried this function but I get the following error message all the time:

placeThumb(thumb:String){
  thumb = thumb.replace('{width}', '300');
  thumb = thumb.replace('{height}', '150');
  return thumb;
}

The error code I'm getting is:

Uncaught (in promise): TypeError: Cannot read property 'replace' of undefined
TypeError: Cannot read property 'replace' of undefined at PlayerPage.webpackJsonp.109.PlayerPage.placeThumb (http://localhost:8100/build/main.js:202:23)
at Object.eval [as updateRenderer] (ng:///AppModule/PlayerPage.ngfactory.js:166:26)
at Object.debugUpdateRenderer [as updateRenderer] (http://localhost:8100/build/vendor.js:15109:21)
at checkAndUpdateView (http://localhost:8100/build/vendor.js:14223:14)
at callViewAction (http://localhost:8100/build/vendor.js:14569:21)
at execComponentViewsAction (http://localhost:8100/build/vendor.js:14501:13)
at checkAndUpdateView (http://localhost:8100/build/vendor.js:14224:5)
at callWithDebugContext (http://localhost:8100/build/vendor.js:15472:42)
at Object.debugCheckAndUpdateView [as checkAndUpdateView] (http://localhost:8100/build/vendor.js:15009:12)
at ViewRef_.detectChanges (http://localhost:8100/build/vendor.js:11993:22)

I think it should be really simple but maybe I am missing something.

HTML is looking as follows:

<ion-card>
  <img [src]="placeThumb(playerData.twitch_thumb)"/>
  <ion-card-content>
    <ion-card-title>
     <ion-icon name="logo-twitch" class="iconblink"></ion-icon> Streaming: {{playerData.twitch_title}}
    </ion-card-title>
    <p>
      {{ playerData.twitch_thumb }}
      {{ placeThumb(playerData.twitch_thumb) }}
    </p>
  </ion-card-content>
</ion-card>
2
javascriptangulartypescriptionic-framework
thumb is undefined. Where is thumb coming from? – briosheje
Thats the strange thing, it isn't. Its called from html {{ placeThumb(playerData.twitch_thumb) }} When I do it like the following, it does work. But it only replaced one value as you can see: placeThumb(thumb){ return thumb && thumb.replace('{height}', '150'); } – JesseH
have you tried thimb.toString().replace('{width}', '300'); ?? – Zulqarnain Jalil
So, what's the initial value of playerData.twitch_thumb? Also, I personally would avoid to use a method in angular to display data. Either use a getter, either alter the value. If you're going to display many items with that criteria, you may encounter performance issues, since the value will be evaluated endlessly. – briosheje
@JesseH - please show your full HTML to help us help you. Have you tried using Augury to see the data in the HTML? – HockeyJ

2 Answers

0
votes

Everything seems to work. I am unable to reproduce the issue mentioned above. here is the working demo.

0
votes

Not really sure what the issue was. Because this code only have to load once on page load I managed to run the function on the ts file and assign it to a variable.

So from .TS i'm running it like:

twitchThumb:any;

getPlayerInfo(){
   let twthumb = 'https://website.com/image{width}x{height}.jpg';
   this.twitchThumb = this.placeThumb(twthumb);
}

placeThumb(thumb){
   thumb = thumb.replace('{width}', '300');
   thumb = thumb.replace('{height}', '150');
    return thumb;
}

And on the HTML I simply call {{ twitchThumb }}

Thanks all for the feedback!