Die Bedingung kann nicht gesetzt werden. * NgIf angular2 directiv - angular

Ich habe einen Haken in meiner html auf die Länge einer Eigenschaft gesetzt

<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>

Und ich hole die Daten von einem Dienst. Hier ist meine Komponente

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
}
)
}
}

Wenn also keine Daten in der Datenbank vorhanden sind, wird einfach ein leeres Array zurückgegeben.

Aber angular2 zeigt einen Fehler an:

TypeError: Cannot read property "length" of undefined

Irgendeine Idee dazu ??

Antworten:

products ist nicht durch die Zeit definiert, die es von Ihrer asynchronen Operation zugewiesen wurde (sharedservice.getData()). Was Sie tun können, ist, Ihre ngIfs neu zu schreiben. Also werden sie prüfen, ob product ist in erster Linie definiert.

Beispiel:

*ngIf="products && products.length"

Sie können auch den Sicherheitsoperator verwenden:

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

Sie müssen Produkte als Array-Typ deklarieren.

so was -

Produkte: any [] = [];