如何防止在 Angular 中的 HTML 元素后面打印空格？

Question

我想输出一个格式化的名称字符串，其中姓氏以粗体显示。像这样：

姓氏，名字

在 Angular 中，我通常会在 HTML 模板中执行此操作：

<strong>{{ lastname | uppercase }}</strong>, {{ firstname }}

但是由于

strong

标签，它会在标签后面自动插入一个“空格”并导致：

姓氏，名字

那么如何防止在 HTML 模板中打印额外的

space

呢？

Answer 1

要格式化姓氏为粗体且不添加空格的姓名字符串，您可以将其包装在 < span > 中，这样第一个和最后一个之间的空格就不会受到 < strong >:

的影响

<span>
  <strong>{{ lastname | uppercase }}</strong>, {{ firstname }}
</span>