angular2/javascript - NgFor looping through array inside of object

Question

I have my own object with data which I loop through using ngFor. However there is an array part in the object, which I want to loop through as well in a <li></li>

Currently it looks like this. However I don't want the complete string in one <li></li> I just want one piece of the array there.

Relevant Code:

tier.model

export class Tier {
  constructor (
    public id: number,
    public title: string,
    public rewards: any[],
    public price: number
  )
  {}
}

component:

export class PackagesComponent {  //will be renamed to TierComponent
  public tierToEdit: Tier;
  editMode = false;
  tiers: Tier[] = [
    new Tier(
      10,
      'First Tier',
      ['Server access - Simple', 'Win something small', 'and so on'],
      5.00),
    new Tier(
      11,
      'Second Tier',
      ['Server access - Standard', 'Win something medium', 'and so on and on'],
      10.00),
    new Tier(
      12,
      'Third Tier',
      ['Server access - Advanced', 'Win something big', 'and so on and on and on'],
      10.00)
  ]

template:

<div class="row">
  <div  class="col-md-4" *ngFor="let tier of tiers; let i=index;">
    <ul class="pricing-table">
      <li class="plan-name">
        {{ tier.title }}
      </li>
      <li *ngFor="let reward of tiers">
        {{ reward.rewards }}
      </li>
      <p class="plan-price">{{ tier.price }}</p>
      <li class="plan-action">
        <a class="btn btn-primary" (click)="onEdit(tier)">Edit</a>
        <a class="btn btn-success" (click)="this.clickSave()">SaveYes</a>
        <a class="btn btn-warning" >Get</a>
      </li>
    </ul>

In the end it should look like this:

Something else I tried was this:

<div  class="col-md-4" *ngFor="let tier of tiers; let i=index;">
    <!-- Show Mode -->
    <ul *ngIf="!editMode || tierToEdit != tier" class="pricing-table">
      <li class="plan-name">
        {{ tier.title }}
      </li>
      <li *ngFor="let reward of tiers; let i=index">
        {{ reward.rewards[i] }}
      </li>

Which than gave me the first element of the first array, the second element of the second array and the third element of the third array:

Hope this is not to confusing, still very new to angular/javascript, sorry for possibly asking stupid question or using wrong terms :) Thank you very much!

Please create a plnkr or fiddle.

lin
– lin

2017-06-08 12:07:56 +00:00
Commented Jun 8, 2017 at 12:07 — lin
– lin, Commented Jun 8, 2017 at 12:07

anoop · Accepted Answer · 2017-06-08 12:32:27Z

2

You need to iterate on nested array in 2nd *ngFor as well, Like :

 <div class="row">
   <div  class="col-md-4" *ngFor="let tier of tiers; let i=index;">
    <ul class="pricing-table">
      <li class="plan-name">
        {{ tier.title }}
      </li>
      <li *ngFor="let reward of tier.rewards">
        {{reward}}
      </li>
      <p class="plan-price">{{ tier.price }}</p>
      <li class="plan-action">
        <a class="btn btn-primary" (click)="onEdit(tier)">Edit</a>
        <a class="btn btn-success" (click)="this.clickSave()">SaveYes</a>
        <a class="btn btn-warning" >Get</a>
      </li>
    </ul>
 </div>
</div>

answered Jun 8, 2017 at 12:32

anoop

3,8222 gold badges18 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

junior_dn Over a year ago

wow, I feel incredibly stupid. Thanks a lot, that worked. Didn't know I could user tier.rewards, thought it would need to be tierS.rewards, since that's the way I define it in my component.ts Thank you very much!

junior_dn Over a year ago

so basically the tier now refers to the tier above? puu.sh/wekZj/c85bc73f5a.png just asking so I understand for the future

anoop Over a year ago

@junior_dn : yes tier refer to 1st *ngFor, no matter how many ngFor you have inside, since *ngFor create block scope, like var in javascript... and glad to help you :)

aseferov · Accepted Answer · 2017-06-08 12:09:04Z

0

try this

   <li *ngFor="let reward of tier.rewards">
        {{ reward }}
   </li>

answered Jun 8, 2017 at 12:09

aseferov

6,4233 gold badges20 silver badges24 bronze badges

Collectives™ on Stack Overflow

angular2/javascript - NgFor looping through array inside of object

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related