Angular 2. Loop of array inside object using ngFor

Question

I have next structure of a component data:

I want to print a list of assignedCards within component's view using *ngFor. I do this possible:

<div *ngFor="#item of mission.assignedCards" class="b-progress-bar__item m-progress-bar__item_completed">
<div class="b-progress-bar__inner">{{item}}</div>
</div>

But it falls with an exception:

If i test mission value, it says me, that mission is an object.

So, i'd like to access assignedCards array inside mission object and make a loop of it.

Answer 1

I guess that the mission object is loaded asynchronously. So it's undefined at a first time and is set later...

So you could use the Elvis operator (mission?.assignedCards):

<div *ngFor="#item of mission?.assignedCards"
      class="b-progress-bar__item m-progress-bar__item_completed">
  <div class="b-progress-bar__inner">{{item}}</div>
</div>