J'essaie de faire fonctionner cette chose facile mais je ne peux pas la trouver...

J'ai cette URL qui ressemble à ceci :

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

Maintenant, je dois remplacer les valeurs {width} et {height}.

J'ai essayé cette fonction mais j'obtiens tout le temps le message d'erreur suivant :

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

Le code d'erreur que j'obtiens est :

Uncaught (en promesse) : TypeError : Impossible de lire la propriété 'replace' de undefined
TypeError : impossible de lire la propriété 'replace' de non défini sur PlayerPage.webpackJsonp.109.PlayerPage.placeThumb (http://localhost:8100/build /main.js:202:23)
à Object.eval [comme updateRenderer] (ng:///AppModule/PlayerPage.ngfactory.js:166:26)
sur Object.debugUpdateRenderer [as updateRenderer] (http://localhost:8100/build/vendor .js:15109:21)
à checkAndUpdateView (http://localhost:8100/build/vendor.js:14223:14)
à callViewAction (http://localhost:8100/build/vendor.js:14569:21 )
à execComponentViewsAction (http://localhost:8100/build/vendor.js:14501:13)
à checkAndUpdateView (http://localhost:8100/build/vendor.js:14224:5 )
à callWithDebugContext (http://localhost:8100/build/vendor.js:15472:42)
à Object.debugCheckAndUpdateView [as checkAndUpdateView] (http://localhost:8100/build/vendor .js:15009:12)
à ViewRef_.detectChanges (http://localhost:8100/build/vendor.js:11993 :22)

Je pense que cela devrait être très simple mais peut-être que j'ai raté quelque chose.

HTML ressemble à ceci :

<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>
0
JesseH 8 mars 2019 à 13:28

2 réponses

Meilleure réponse

Je ne sais pas vraiment quel était le problème. Parce que ce code ne doit être chargé qu'une seule fois lors du chargement de la page, j'ai réussi à exécuter la fonction sur le fichier ts et à l'affecter à une variable.

Donc, à partir de .TS, je l'exécute comme :

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;
}

Et sur le HTML j'appelle simplement {{ twitchThumb }}

Merci à tous pour les retours !

0
JesseH 8 mars 2019 à 10:49

Tout semble fonctionner. Je n'arrive pas à reproduire le problème mentionné ci-dessus. voici la démo fonctionnelle.

0
Muhammad Abdullah Shafiq 8 mars 2019 à 10:43