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

Posted 2023-02-18

【中文标题】Angular：ngFor数据项并在为空时显示自定义消息

【英文标题】：Angular : ngFor data items and display custom message if empty

【发布时间】：2019-03-11 19:25:11

【问题描述】：

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

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

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

看起来像这样 ::

AAA,BBB,CCC,DDD,

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

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

建议？

【参考方案1】：

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

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

【参考方案2】：

当数组不包含数据时，您可以使用ngIf ... else 构造来显示替代模板。为避免在外部 span 元素周围添加 HTML 容器，请将其包装在 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>

请参阅this stackblitz 以获取演示。

【参考方案3】：

使用管道的解决方案

这个想法是向myData 添加另一个元素，如果它是空的，否则保持不变，如下所示：

新建一个文件data.pipe.ts在里面添加如下内容：

import  Pipe, PipeTransform  from '@angular/core'

@Pipe(
    pure: false, // We need to update if it change, you are free to remove if you don't want this behaviour
    name: 'appData'
)
export class DataPipe implements PipeTransform 
    transform(data: any)  // Here data should be an array.
        if (data.length === 0) 
            return ['NO DATA'];
         else 
            return data;
        
    

现在在您的AppModule 或任何模块（您要在其中添加它）的声明数组中添加DataPipe（不要忘记添加导入），现在在您的模板文件中：

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

【参考方案4】：

为此使用管道是不必要的，因为单个 ngIf 和 ngElse 应该可以解决它，甚至使用相反条件的双 ngIf 条件也应该可以解决。

【参考方案5】：

您可以创建自己的管道来评估列表并在原始列表为空的情况下默认响应一个。例如：

如下定义管道：

@Pipe(name: 'empty')
export class EmptyPipe implements PipeTransform 
  transform(value: any[], emptyText: string = 'NO ITEMS'): any 
    return value && value.length > 0? value : [name: emptyText];
  

将管道添加到模块的声明中：

NgModule(
  imports: [ BrowserModule ],
  declarations: [ AppComponent, EmptyPipe ],
  bootstrap: [ AppComponent ]
)
export class AppModule  

最后在*ngFor中使用管道如下：

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

【参考方案6】：

以防万一有人需要它，我在没有包装容器的情况下做到了

<span *ngFor="let data of myData || []"> data.name </span>  
<span *ngIf="myData?.length == 0">NO ITEMS</span>

【参考方案7】：

<span  *ngFor="let d of myData | appData;"> 
    d.name 
    <span *ngIf="(myData | appData).length==0">
        Your custom message
    </span>
</span>

试试这个。