Cannot read property of undefined angular2 ngif

Question

I am now able to get the object in the view however I cannot run an if statement. Per previous answer this is how I am bringing in the object.

public getPos         


        

Answer 1

I used {{ }} while they are not needed. Getting rid of them fixed it for me.

So this

<li *ngIf="{{house}}">

Should be

<li *ngIf="house">

Answer 2

The cart object is null until the service getPosts$ returns (callback). Therefore, the code *ngIf="cart.vegetable ... is equal to *ngIf="null.vegetable ... until that happens. That is what is happening.

What you could do is put a DOM element with *ngIf="cart" containing the other *ngIf. For example:

<div *ngIf="cart">
    <h2 *ngIf="cart.vegetable == 'carrot' ">{{cart.vegetable}}</h2>
</div>

*Edit: As it is said in the next answer, a good alternative (and good practice) is the following:

<h2 *ngIf="cart?.vegetable == 'carrot' ">{{cart.vegetable}}</h2>

Answer 3

Use the safe-navigation operator to guard against null or undefined for async fetched data:

<h2 *ngIf="cart?.vegetable == 'carrot' ">{{cart.vegetable}}</h2>