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没有值，则仍显示“点” ...我知道这是因为点在“-”之外。

我该如何解决？

可以为此创建管道吗？

Answer 1

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

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

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

Answer 2

如果要在没有数据时显示replaceAll(";","")符号，则可以使用三元replaceAll("#TempSeparator#", ";")运算符：

As mdn says:

条件（三元）运算符是唯一的JavaScript运算符需要三个操作数：条件后跟问号（?），然后在条件为真时执行表达式由冒号（<span>{{post.category ? post.category : '-'}}</span>），最后是要在条件满足的情况下执行的表达式是虚假的。此运算符通常用作?的快捷方式声明。

Answer 3

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

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

Answer 4

尝试一下

检查值（如果存在），将其传递给pipe，否则显示默认图标。

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

Answer 5

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

<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>

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

5 个答案: