Angular 在角度模板中有条件地呈现逗号

在Angular 7模板上，我要显示：

{{addressLocality}}, {{addressCountry}}

因此，如果两者都不为空，则变为：

New York, USA 

但是，其中一个或两者都可能为null，这对逗号没有任何意义

当其中一个逗号为空时，有没有一种简单的方法可以删除逗号

---

我正在查看

项。join（“，”

，但在本例中，我有两个变量，而不是一个列表。

您可以如下所示使用，形成一个变量数组，检查它们是否为null，然后用“，”表示

get addressStr(): string {
  return [this.addressLocality, this.addressCountry].filter(Boolean).join(", ");
}

并在模板中使用

{{addressStr}

。

使用getter：

get phrase() {
  return [this.addressLocality, this.addressCountry]
    .filter(val => !!val)
    .join(', ');
}

用

{{ phrase }}

---

我最终创建了一个管道来解决这个问题（可能对其他人有用）：

在我的问题中，可使用如下：

{{ [addressLocality, addressCountry] | join }}

管道默认使用@trichetriche建议的

过滤器（x=>！！x）

从数组中删除空值

---

但这也可能是管道的输入，例如，从数组中删除或不删除空值。

{code>{{addressLocality}}{{addressLocality&&'，'{addressCountry}}{[addressLocality，addressCountry]。join（'，'）}存在多个选项，但没有一个是神奇的，您必须自己编写它们@trichetriche第二个选项在两者都为null时仍显示逗号。这会导致错误“TypeError:Array.prototype.filter回调必须是函数过滤器”您不能使用此语法，回调不能写入模板中。

{{ [addressLocality, addressCountry] | join }}