我有这个 json 对象:
data = {
"name": "somename",
"items": [
{
"title": "Item 1",
"description": "Some description for item1"
},
{
"title": "Item 2",
""
},
{
"title": "Item 3",
"description": "Some description for item3"
}
]
}
对于 *ngFor 和仅显示具有描述的项目,推荐的 rc2 方法是什么?
HTML 模板:
<li *ngFor="let item of data.items" class="item">
<div>{{item.title}}</div>
<div>{{item.description}}</div>
</li>
最佳答案
在重复元素上添加一个 *ngIf
并检查 length
属性的虚假条件,如下所示:
<ul>
<template ngFor let-item [ngForOf]="data.items">
<li class="item" *ngIf="item?.description?.length">
<div>{{item.title}}</div>
<div>{{item.description}}</div>
</li>
</template>
</ul>
您不能从同一元素上的 *ngIf
中的 *ngFor
访问 item
变量,这就是为什么您需要添加一个 template
标签封装 li
.
Working Plunker for example usage
关于Angular2 ngFor - 如果没有值则跳过,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38079314/