Блог

Главная - Вопросы по программированию - Строка Typescript (Ionic 3 / Angular) заменяет URL-адрес

Строка Typescript (Ionic 3 / Angular) заменяет URL-адрес

#javascript #angular #typescript #ionic-framework

#javascript #angular #typescript #ionic-framework

Вопрос:

Пытаюсь заставить эту простую вещь работать, но не могу ее найти…

У меня есть этот URL, который выглядит следующим образом:

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

Теперь мне нужно заменить {width} и {height} значения.

Я пробовал эту функцию, но постоянно получаю следующее сообщение об ошибке:

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

Код ошибки, который я получаю, является:

Не перехваченный (в обещании): ошибка типа: не удается прочитать свойство ‘replace’ неопределенного
Ошибка типа: не удается прочитать свойство ‘replace’ неопределенного в PlayerPage.webpackJsonp.109.PlayerPage.placeThumb (http://localhost:8100/build/main.js:202:23 )
в Object.eval [как средство обновления] (ng:///AppModule/PlayerPage.ngfactory.js:166:26)
в Object.debugUpdateRenderer [как средство обновления] (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 [как checkAndUpdateView] (http://localhost:8100/build/vendor.js:15009:12 )
в ViewRef_.DetectChanges (http://localhost:8100/build/vendor.js:11993:22 )

Я думаю, это должно быть действительно просто, но, возможно, я чего-то не хватает.

HTML выглядит следующим образом:

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

Комментарии:

1. thumb не определено. Откуда thumb берется?

2. Вот что странно, это не так. Он вызывается из html {{ placeThumb(playerData.twitch_thumb) }} Когда я делаю это следующим образом, это действительно работает. Но это заменило только одно значение, как вы можете видеть: placeThumb(thumb){ return thumb amp;amp; thumb.replace('{height}', '150'); }

3. вы пробовали thimb.toString().replace(‘{width}’, ‘300’); ??

4. Итак, каково начальное значение playerData.twitch_thumb ? Кроме того, я лично избегал бы использовать метод в angular для отображения данных . Либо используйте средство получения, либо измените значение. Если вы собираетесь отображать много элементов с такими критериями, вы можете столкнуться с проблемами производительности, поскольку значение будет вычисляться бесконечно.

5. @JesseH — пожалуйста, покажите свой полный HTML, чтобы помочь нам помочь вам. Вы пробовали использовать Augury для просмотра данных в HTML?

Ответ №1:

Кажется, все работает. Я не могу воспроизвести проблему, упомянутую выше. вот рабочая демонстрация.

Ответ №2:

Не совсем уверен, в чем была проблема. Поскольку этот код должен загружаться только один раз при загрузке страницы, мне удалось запустить функцию в ts-файле и присвоить ее переменной.

Итак, из .TS я запускаю это как:

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

И в HTML я просто вызываю {{ twitchThumb }}

Спасибо всем за обратную связь!