Question

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

<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 d of myData || []">{{ d.name }}</span>  
<span *ngIf="!myData.length">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>

试试这个。

角度：ng用于数据项，如果为空则显示自定义消息

7 个答案:

使用管道的解决方案