Question

我已经检查了我的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

关于这个的任何想法??

Answer 1

products未定义为从异步操作（sharedservice.getData()）分配的时间。你可以做的是重写你的ngIfs。因此，他们将首先检查是否定义了product。

示例：

*ngIf="products && products.length"

Answer 2

您也可以使用安全操作员：

   <div class="row" *ngIf="products?.length">

Answer 3

需要将产品声明为数组类型;

像这样 -

产品：任何[] = [];

无法在* ngIf angular2 directiive

3 个答案: