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

我正在循环我的数据列表并在视图中显示，如下所示：

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

但是我的数据可能是空的，所以我想显示一些自定义字符串：

“无项”

我想在html部分用管道来处理这个问题

---

建议？

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

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

…//现有跨距列表
没有数据

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

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

…//现有跨距列表
没有数据

当数组不包含数据时，可以使用构造来显示替代模板。要避免在外部

span

元素周围添加HTML容器，请将其包装在

ng容器中（HTML输出中不会呈现该容器）：


{{d.name}
,
没有物品！！！

有关演示，请参阅。
当数组不包含数据时，可以使用构造来显示替代模板。要避免在外部
span
元素周围添加HTML容器，请将其包装在
ng容器中（HTML输出中不会呈现该容器）：


{{d.name}
,
没有物品！！！

有关演示，请参阅。
使用管道的解决方案
想法是在
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>


{{d.name}
,
使用管道的解决方案
想法是在
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>


{{d.name}
,
使用管道解决此问题是不必要的，因为单个ngIf和ngElse应解决此问题，甚至具有相反条件的双ngIf条件也应解决此问题。
使用管道解决此问题是不必要的，因为单个ngIf和ngElse应解决此问题，甚至具有相反条件的双ngIf条件也应解决此问题。
您可以创建您的自己的管道，用于评估列表并在原始列表为空时默认响应列表。例如：

按如下方式定义管道：

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

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

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

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

最后使用*ngFor中的管道，如下所示：

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

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


{{d.name}
,
您可以创建自己的管道，用于评估列表，并在原始列表为空时默认响应列表。例如：

按如下方式定义管道：

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

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

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

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

最后使用*ngFor中的管道，如下所示：

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

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


{{d.name}
,
为了防止有人需要它，我没有使用包装容器

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

{{d.name}
没有项目
为了防止有人需要它，我没有使用包装容器

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

{{d.name}
没有项目