Angular typescript - 如何删除component.html中单词之间的空格答案

【问题标题】：Angular typescript - how to remove space in between words in component.htmlAngular typescript - 如何删除component.html中单词之间的空格
【发布时间】：2021-06-26 06:21:55
【问题描述】：

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

【问题讨论】：

据我所知，这不是您可以直接在 HTML/CSS 中执行的操作。您可能需要一个角管或类似的东西。

标签： angular typescript removing-whitespace

【解决方案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"一起使用

【讨论】：