Angular typescript - 如何删除 component.html 中单词之间的 space

Question

在我的 component.html 中，我有一个 img 标签，图像源值来自一个数组。该数组由一个名为 name 的属性组成。名称可以是两个或三个单词，单词之间有空格。如何将图像 src 设置为数组的“名称”属性，单词之间没有空格。

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 模板本身中实现这一点？

Answer 1

由于@Andrei Tatar 没有 post 一个关于如何用管道完成的例子的答案，我把它放在一起来展示用管道操作数据是多么容易。

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

并与 <img [src]="item.name | trimWhitespace"

一起使用

Angular typescript - 如何删除 component.html 中单词之间的 space

Angular typescript - how to remove space in between words in component.html

removing-whitespace

typescript

angular