CODEWITHSUNDEEP
javascriptangularcomponents
Edward
Edward

Reputation: 689

Angular 2. Loop of array inside object using ngFor

I have next structure of a component data:

enter image description here

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:

enter image description here

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

enter image description here

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

Upvotes: 3

Views: 3619

Answers (1)

Thierry Templier
Thierry Templier

Reputation: 202346

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>

Upvotes: 11

Related Questions