CODEWITHSUNDEEP
javascriptangulartypescript
Angulandy2
Angulandy2

Reputation: 806

Angular 2 display Array in array

If I have this array : 

array = [
{
  img: [
        {0: 'http://hairsalonfurniture.eu/wp-uploads/750x480_how-to-create-a-nice-hair-salon-s-reception-gjzd.jpg',},
        {1: 'http://hairsalonfurniture.eu/wp-uploads/750x480_how-to-create-a-nice-hair-salon-s-reception-gjzd.jpg',},
      ],
}

{
  img: [
        {0: 'http://hairsalonfurniture.eu/wp-uploads/750x480_how-to-create-a-nice-hair-salon-s-reception-gjzd.jpg',},
        {1: 'http://hairsalonfurniture.eu/wp-uploads/750x480_how-to-create-a-nice-hair-salon-s-reception-gjzd.jpg',},
      ],
}
]

How do I display it in HTML ? I know how to display one img if it was img : 'url' it would look like this ; 

this.imgs = this.myprovider.getArray();

HTML :

<div ngfor="let item of imgs">{{item.img}}</div>

Upvotes: 0

Views: 5974

Answers (4)

Brandon Taylor
Brandon Taylor

Reputation: 34553

Since your key in the array of img objects is a number starting at 0, you can just use the loop index to access the value:

<ul>
  <li *ngFor="let item of array">
    <ul>
      <li *ngFor="let image of item.img; let i = index">
        <img src="{{ image[i] }}" />
      </li>
    </ul>
  </li>
</ul>

Stack Blitz doesn't want to load the image URLs for some reason, but as you can see from the output, the HTML is correct: https://stackblitz.com/edit/nested-array-example

Upvotes: 2

Suresh Kumar Ariya
Suresh Kumar Ariya

Reputation: 9764

<div *ngFor="let item of imgs">
    <div *ngFor="let img of item.img; let i=index;">{{img[i]}}</div>
</div>

Upvotes: 0

Sunil
Sunil

Reputation: 11243

You can iterate twice in nested manner - 

<ng-container ngfor="let childImages of imgs">
    <div ngfor="let item of childImages">{{item.img}}</div>
<ng-container>

Note : You should use instead of any other html element otherwise it will distort html look & feel.

Upvotes: 0

Chiffie
Chiffie

Reputation: 621

Try 

<div ngfor="let item of imgs">{{item.img.toString()}}</div>

or

<div ngfor="let item of imgs">
    <div ngfor="let img of item.img">{{img}}</div>
</div>

Upvotes: 0

Related Questions