Question

在角度应用程序中，我从服务中检索地址列表，该服务返回一个如下所示的对象：

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

当其中一个表达式包含空值（例如地址没有建筑物名称）时，ui就会省略它，所以一切看起来都不错。但页面源包含一个空白表达式的附加空格。

记录<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>

建筑物编号和街道之间不应该有逗号，所以我只添加一个仅在建筑物编号存在时才会渲染的空间。

页面之后的源中的角度空格已呈现

1 个答案: