如果字段值为空，则显示破折号答案

【问题标题】：Having a dash if field values are null如果字段值为空，则显示破折号
【发布时间】：2021-09-02 04:11:32
【问题描述】：

我正在开发一个角度应用程序。我的 html 中有以下代码

      <div>{{ data.date | date:'d-MMM-y' || '-' }}</div>
       <div>{{ data.id  || '-' }}</div>

我面临的问题是，无论何时对于日期和 id 等任何字段，如果来自 API 的值为 null，则下一个 div 向上移动。我希望 div 位于值不为空的特定位置。因此，每当来自 API 的值为空时，我都希望有一个破折号“-”。所以在我的代码中，我向所有字段添加了一个|| '-'，但它仍然无法正常工作。我的 html 中没有出现“-”。我该怎么做？

【问题讨论】：

标签： html css angular angular8 angular9

【解决方案1】：

您已经接近结果，只是缺少一些括号：

<div>{{ (data?.date) ? (data.date | date:'d-MMM-y') : '-' }}</div>

工作 Stackblitz：https://stackblitz.com/edit/angular-vb4peg?file=src/app/app.component.ts

只需评论this.data["date"] = new Date();这一行，您就会看到它的变化。

【讨论】：

【解决方案2】：

您可以在这种情况下使用nullish coalescing 运算符

会是这样的：

  <div> {{ (data.date | date:'d-MMM-y') ?? '-' }} </div>
  <div> {{ data.id ?? '-' }} </div>

【讨论】：