Angular typescript - как удалить пробел между словами в component.html

В моем component.html у меня есть тег img, значение источника изображения поступает в виде массива. Массив состоит из свойства с именем name. Имя может состоять из двух или трех слов с пробелами между словами. Как установить src изображения в свойство "name" массива, без пробелов между словами.

Array - item[0] : 
{
description: "fruits",
name: "Apple orange pear",
age: "30"
}


HTML :
 <img [src] = "item.name" [alt] = "item.description"> ---- here the item.name if it has any whitespaces in between should be removed.

Как этого добиться в самом шаблоне component.html?

Насколько я знаю, это не то, что вы можете сделать напрямую в HTML / CSS. Возможно, вам понадобится угловая труба или что-то подобное.

— 30.03.2021 11:45

angular typescript removing-whitespace

30.03.2021 11:39

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Angular и React для вашего проекта веб-разработки?

Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...

Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf

Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.

Угловой продивер

Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.

Мое недавнее углубление в Angular

Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...

Освоение Observables и Subjects в Rxjs:

Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Поскольку @Andrei Tatar не опубликовал ответ с примером того, как это можно сделать с помощью канала, я собрал это вместе, чтобы показать, насколько легко манипулировать данными с помощью каналов.

@Pipe({
  name: "trimWhitespace"
})
export class TrimWhitespacePipe implements PipeTransform {
  transform(value: string): string {
    return value.replace(/\s/g,'')
  }
}

и используйте его с <img [src] = "item.name | trimWhitespace"

30.03.2021 12:26