Angular 如何删除角度2/4中两个绑定值之间的空白

嗨，我有一个angular 2模板代码，如下所示：

            <td>
                <a href="#">
                    {{row.test[0].size}}
                    {{row.test[0].length}}
                    {{row.test[0].width}}
                </a>
            </td>

---

但当项目在浏览器中加载时，我会在这些值之间获得一个空间。这是我不想要的。我如何解决这个问题？有什么想法吗，伙计们？我需要用管子什么的吗？提前感谢。

如果您可以直接在模板中插入，那就太好了，但由于您不能，因此，请在组件中创建一个“getter”，如下所示：

get combined（）{
返回`${this.row.test[0].size}${this.row.test[0].length}${this.row.test[0].width}`；
}

并在模板中使用如下内容：

{{combined}

或者更“动态”的方法：

getCombined（currRow）{
返回`${currRow.test[0].size}${currRow.test[0].length}${currRow.test[0].width}`；
}

并在模板中使用，传入当前值：

{{getCombined（row）}

然后它显示为一个字符串

另请参见：这是与插值相关的问题，而不是在模板中解析

---

在这个问题上，还有一个例子。

你可以做一次插值：

            <td>
                <a href="#">
                    {{row.test[0].size +
                      row.test[0].length +
                      row.test[0].width}}
                </a>
            </td>

回车将在HTML中创建一个隐藏空间；如果您希望它们在没有空格的情况下串在一起，那么它们都需要位于标记中的同一行。

Error:Uncaught（in promise）：Error:Template parse errors:↵解析器错误：意外的令牌Lexer错误：表达式[
${row…..
@blackdaemon中第2列出现意外字符[

]，你说得对。ES6模板无法直接解析，这让人恼火。修改了答案并实际测试为使用“getter”有趣的是，我在给出最初的答案后就走开了，但我开始认为它至少会“更干净”为了演示getter。事实证明这是唯一的方法。但是neil，问题是我只通过ngFor获取模板中的数据。@blackdaemon在您的问题中没有说明。基本原理仍然存在。因此，使用

*ngFor

可以在组件上创建一个方法，并将当前值作为参数传递。再次posted示例。如果您正在迭代，您可能不需要数组索引，但同样，这个细节不在您的问题中。我希望您现在理解这一点。@blackdaemon这一总结基本上是“在组件中进行插值”，然后在模板中的组件中使用方法或公开属性。