角空格页面后已经呈现

在一个角度应用程序，我从它返回一个对象，看起来像一个服务中检索地址列表：角空格页面后已经呈现

{ 
    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中的表达式之间有空格，所以当存在空表达式时，它们会留在那里。

是否有任何方法使用角度从页面源删除空白，或者我应该只使用香草js并通过正则表达式运行字符串？

来源

2015-10-07 br3w5

好的我有一个解决方案 - 在表达式之间没有任何空格的情况下编写html，但是使用joinBy过滤器doh重新添加空格！ – br3w5

这实际上是一个简单的修复方法，正视我的脸。空表达式不会留下空白，我添加了包含地址部分之间的空格。

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

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

不应该有之间建立号码和街道逗号，所以我只想补充一点，只有在建设数量存在渲染的空间。

来源

2015-10-07 11:55:33 br3w5

角空格页面后已经呈现

回答

相关问题