时间戳

首页 > 解决方案 > Angular：ngFor数据项并在为空时显示自定义消息

javascript - Angular：ngFor数据项并在为空时显示自定义消息

问题描述

我正在循环我的数据列表并在视图中显示为 spans 标签：

<span  *ngFor="let d of myData; last as isLast"> 
{{d.name}} 
<span *ngIf="!isLast">,</span>
</span>

如您所见，我在项目值之间添加了一个逗号'**

这看起来像这样::

AAA,BBB,CCC,DDD,

但碰巧我的数据是空的：所以我想显示一些自定义字符串： "NO ITEMS"

我想用管道在 html 部分处理它

建议？

标签： javascriptangularangular5angular6angular2-template

解决方案

您可以将列表包装在另一个容器中并仅在数据数组不为空时显示它，否则 - 显示另一个自定义内容，例如：

<div>
    <div *ngIf="myData.length">...// existing list of spans</div>
    <div *ngIf="!myData.length">NO DATA</div>
</div>

推荐阅读