页面呈现后源中的角空格

Question

在 Angular 应用程序中，我从服务中检索地址列表，该服务返回如下对象：

{ 
  Flat: "10B",
  BuildingName: "Some Building",
  Line: "10B Some Building Road Town POST CODE",
  Postcode: "POST CODE",
  Street: "Road",
  Town: "Town"
}

一旦这些数据被传递到控制器中，我需要将地址显示为带有逗号的单行。我使用过滤器添加逗号（Line 的值在这里没有用，因为它不包含逗号）。然后将数据呈现在 html 中，如下所示：

<a>{{ address.Flat | joinBy: ',' }} {{ address.BuildingName | joinBy: ',' }} {{ address.BuildingNumber }} etc...</a>

当其中一个表达式包含空值（例如，地址没有建筑物名称）时，用户界面会忽略它，以便用户看起来一切正常。但是页面源代码在空表达式所在的位置包含一个额外的空格。

记录<a> 元素表明它是outerHTML、innerHTML 或innerText 或文本没有任何额外的空白。

因为html中的表达式之间有空格，所以当有空表达式时，它们会留在里面。

有什么方法可以使用 angular 从页面源中去除空格，还是我应该只使用 vanilla js 并通过正则表达式运行字符串？

Answer 1

这实际上是一个简单的解决方法，并且正盯着我的脸。空表达式不会留下空格，我添加它是为了在地址部分之间包含空格。

我已经在使用joinBy 过滤器，它接受任何分隔符，所以我使用了它。角度标记现在看起来像这样：

<a>{{ address.Flat | joinBy: ', ' }}{{ address.BuildingName | joinBy: ', ' }} {{ address.BuildingNumber | joinBy: ' ' }} {{ address.Street }} etc...</a>

楼号和街道之间不应该有逗号，所以我只添加一个空格，只有在楼号存在时才会呈现。