angular - 如何删除 Angular 2/4 中两个绑定(bind)值之间的空格

Question

您好，我有一个像下面这样的 angular 2 模板代码:

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

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

Answer 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 ，关于这个问题的另一个例子。