打字稿（离子3 /角）字符串替换网址

Question

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>

Answer 1

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

Answer 2

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!