开发者问题收集

无法在 *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