Angular : ngFor 数据项，如果为空则显示自定义消息

Question

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

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

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

看起来像这样::

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 容器，请将其包裹在 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。

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

Answer 4

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

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

Answer 6

为了以防万一有人需要它，我没有包装容器就做到了

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

Answer 7

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

试试这个。

Angular : ngFor 数据项，如果为空则显示自定义消息

Angular : ngFor data items and display custom message if empty

javascript

angular2-template

angular

angular5

angular6

使用管道的解决方案