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

Question

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

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

如您所见，我添加了一个逗号 '**, betewen items values

这看起来像这样 ::

AAA,BBB,CCC,DDD,

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

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

建议？

Answer 1

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

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

Answer 2

当数组不包含数据时，您可以使用ngIf ... else构造来显示替代模板。为了避免在外部span元素周围添加 HTML 容器，请将其包装在 an 内ng-container（不会在 HTML 输出中呈现）：

<ng-container *ngIf="myData.length > 0; else noItems">
  <span *ngFor="let d of myData; last as isLast">
    {{d.name}} 
    <span *ngIf="!isLast">,</span>
  </span>
</ng-container>
<ng-template #noItems>
  NO ITEMS!!!
</ng-template>

请参阅此 stackblitz的演示。