如何在模板中将破折号显示为默认默认值？

Question

使用Angular 8，我的HTML中包含以下内容：

<span>{{post.category || '-'}}</span>

如果post.category为空，将显示破折号。这正在工作。

但是我还有其他两种情况

<span>{{post.createdAt || '-' | date: 'yyyy-MM-dd'}}</span>. 

<span>{{post.classification || '-'}} points</span>

如果createdAt没有值，则不显示破折号……我知道是因为管道。

并且如果classification没有值'points'仍然显示...我知道这是因为points在'-'之外。

我该如何解决？

是否可以为此创建管道？

Answer 1

如果要格式化的日期（如果存在的话），可以用括号括住post.createdAt | date:'yyyy-MM-dd'。像这样。

<span>{{ (post?.createdAt | date:'yyyy-MM-dd') || '-' }}</span>

Answer 2

最简单的解决方案正在使用ng-template

<span *ngIf="post.createdAt else dash">
  {{post.createdAt | date: 'yyyy-MM-dd'}}
</span>

<ng-template #dash>
  -
</ng-template>

Answer 3

如果没有数据时要显示-符号，则可以使用三元?运算符：

<span>{{post.category ? post.category : '-'}}</span>

As mdn says:

条件（三元）运算符是唯一的JavaScript运算符需要三个操作数：条件后跟问号（?），然后在条件为真时执行表达式冒号（:），如果条件满足，最后执行表达式是虚假的。此运算符通常用作if的快捷方式声明。

Answer 4

我认为最简单的解决方案是：

<span *ngIf="post?.createdAt">{{post.createdAt | date: 'yyyy-MM-dd'}}</span> 
<span *ngIf="!post?.createdAt">-</span>

<span *ngIf="post?.classification">{{post.classification}} points</span>
<span *ngIf="!post?.classification">-</span>

Answer 5

尝试一下，

<span>{{ post?.createdAt : (post?.createdAt | date:'yyyy-MM-dd') || '-' }}</span>