无法在 *ngIf angular 2 指令中设置条件
2017-02-18
118
我在 html 中检查了属性的长度
<div class="row" *ngIf="!products.length">
<div class="col-12">No Records Found</div>
</div>
<div class="row" *ngIf="products.length">
<div class="col-12">
<table class="table">
<thead>
<tr>
<th>name</th>
<th>description</th>
<th>category</th>
<th>price</th>
<th>quantity</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let product of products">
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
</tbody>
</table>
</div>
</div>
我正在从服务中获取数据。这是我的组件
export class ManageComponent implements OnInit {
products: any[];
constructor(private sharedservice: SharedService) {
}
ngOnInit() {
this.loadData();
}
loadData() {
this.sharedservice.getData()
.subscribe(
products => {
console.log('p: ', products);
this.products = products
}
)
}
}
因此,当数据库中没有数据时,它只会返回空数组。
但 angular2 显示错误:
TypeError: Cannot read property 'length' of undefined
对此有什么想法吗?
3个回答
products
在从异步操作 (
sharedservice.getData()
) 分配时尚未定义。您可以做的是重写 ngIfs。因此它们将首先检查
product
是否已定义。
示例:
*ngIf="products && products.length"
eko
2017-02-18
您也可以使用安全运算符:
<div class="row" *ngIf="products?.length">
Milad
2017-02-18
需要将产品声明为数组类型;
像这样 -
products: any[] = [];
Ravindra Kumar Chouhan
2017-02-18