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

【问题标题】：How to remove white space between two two bind values in Angular 2/4如何删除Angular 2/4中两个两个绑定值之间的空白
【发布时间】：2017-10-26 18:28:47
【问题描述】：

您好，我有一个 Angular 2 模板代码，如下所示：

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

但是当项目在浏览器中加载时，这些值之间会出现一个空格。这是我不想要的。我该如何解决这个问题？有什么想法吗？我需要使用任何管道或其他东西吗？提前致谢。

【问题讨论】：

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

标签： angular angular2-template

【解决方案1】：

如果您可以直接在模板中进行插值，那就太好了，但既然不能，那么在您的组件中创建一个“getter”，如下所示：

get combined() {
  return `${this.row.test[0].size}${this.row.test[0].length}${this.row.test[0].width}`;
}

并像这样在您的模板中使用：

{{ combined }}

或者作为一种更“动态”的方法：

getCombined(currRow) {
 return `${currRow.test[0].size}${currRow.test[0].length}${currRow.test[0].width}`;
}

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

{{ getCombined(row) }}

然后它只显示为一个字符串。

另请参阅：https://github.com/angular/angular/issues/7558，这是与插值未在模板中解析相关的问题。

还有这个question，关于这个问题的另一个例子。

【讨论】：

Error: Uncaught (in promise): Error: Template parse errors:↵Parser Error: Unexpected token Lexer Error: Unexpected character [] 在第 2 列的表达式 [ ${row.....
@blackdaemon 是的。令人讨厌的是 ES6 模板不会直接解析。修改了答案并实际测试了在组件上使用“getter”。有趣的是，我在发布原始答案后走开了，但开始认为展示吸气剂至少会“更干净”。事实证明，这确实是唯一的方法。
但是尼尔，问题是我只能通过 ngFor 在我的模板中获取数据。
@blackdaemon 您的问题中没有说明。基本原则仍然存在。因此，使用 *ngFor 在组件上创建一个方法并将当前值作为参数传递。再次发布示例。如果您正在迭代，您可能不想要数组索引，但同样，这个细节不在您的问题中。我希望你现在明白这一点。
@blackdaemon 这个总结基本上是“在组件中做插值”，然后在你的模板中使用组件中的方法或者暴露的属性。

【解决方案2】：

你可以做一个插值：

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

【讨论】：