[英]Check for null value in ngFor loop
我正在网页上的按钮中显示信息。 这些按钮显示列表中的几个对象及其字段(例如object.name,object.age等)。 在某些情况下,这些字段之一为空。 如何检查值是否为空? 如果为空,我想打印“未知”-到目前为止,它什么都不打印。
这是我的ngFor循环(在我的情况下,环境有时为null):
<button *ngFor="let object of objects; let i = index" type="button" style="text-align:left; margin-right: 10px; margin-bottom: 10px" class="btn btn-primary"
Name: {{object.name}} <br /> Locations: {{object.date}} <br /> Environments: {{object.environment}}
</button>
我知道我可以将环境手动设置为“未知”,因为它是一个字符串值,但是我想知道是否可以通过html来实现。
这是您的管道的外观:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'unknown'})
export class Unknown implements PipeTransform {
transform(value: any): any {
return value ? value : 'Unknown'
}
}
在组件内部,您需要包括管道:
@Component({
...
pipes: [Unknown] // this is whatever you named your exported class
然后在你的HTML中
...
<br /> Environments: {{object.environment | unknown}} //this is whatever name you put in the @Pipe decorator
我个人比较喜欢管道,因为它可以使HTML更清晰易读,并且可以充分利用您在其中进行编码的框架
管道是一个很好的解决方案,但是如果您愿意,可以直接在html中使用* ngIf:
<button *ngFor="let object of objects; let i = index" type="button" style="text-align:left; margin-right: 10px; margin-bottom: 10px" class="btn btn-primary"
Name: <span *ngIf="object.name">{{object.name}}</span> <span *ngIf="!object.name">Unknown</span>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.