Angular 页面呈现后源代码中的空格

Question

在一个 angular 应用程序中，我正在从一个服务中检索地址列表，该服务 returns 一个看起来像这样的对象：

{ 
  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>

当其中一个表达式包含空值（例如，地址没有 building 名称）时，ui 会忽略它，因此对用户来说一切看起来都很好。但是页面源代码在空表达式所在的位置包含一个额外的空格。

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

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

有没有什么方法可以使用 angular 从页面源代码中去除空格，或者我应该只使用 vanilla js 和运行通过正则表达式的字符串？

Answer 1

这实际上是一个简单的修复，并且直接盯着我看。空表达式不会留下白色 space，我添加它是为了在地址部分之间包含 spaces。

我已经在使用接受任何定界符的 joinBy 过滤器，所以我使用了它。 angular 标记现在看起来像这样：

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

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

Angular 页面呈现后源代码中的空格

Angular whitespaces in source after page has rendered

javascript

whitespace

angularjs