1

i have an array of objects composed of objects (id,image), and i also have several cards as result of my fetch to the backend. What im trying to do is on every card establish a carousel exclusively with the images that match with the id the card has in fact , lets say this is my array of images

arrayOfImages:[
 {id: "1",image: "xxxxxxxxxx"},
 {id: "1",image: "xxxxxxxxxx"},
 {id: "2",image: "xxxxxxxxxx"},
 {id: "2",image: "xxxxxxxxxx"},
 {id: "1",image: "xxxxxxxxxx"},
 {id: "2",image: "xxxxxxxxxx"}
]

Lets say then on my html tag in angular i trigger the html :

<div  *ngFor="let post of allPortafolio;let i=index">
  //NgFor that bring me all cards from back
  //some code
  <ngb-carousel>
    //carousel specific for one card where in i want to loop over the array of images
    <ng-template ngbSlide *ngFor="let image of arrayOfImages">
      <img *ngIf="post.id===image.id;else alternative" [src]="image.image">
      <ng-template #alternative>
        <img " else  src="../../../assets/white.jpg">
      </ng-template>
    </ng-template>
  </ngb-carousel>
</div>

As you could see , had to use an else , using other fixed template while the loops keeps its course not matching the id conditions, but the aesthetic is horrible, cause seems like if the page where in constant fetch recharge , instead of having a smooth flow in the carousel.

But i was wondering if there was another alternative where i could witouth using an else could loop over that array of objects and asign to every card its respective images with the matching id's to the card in fact, thus then their respective carousels would flow perfect without interruptions

Elmehdi
  • 1,390
  • 2
  • 11
  • 25
Enrique GF
  • 1,215
  • 3
  • 16
  • 35

1 Answers1

0

A better way to achieve what you want is to create a function in you typescript file where you match the id of a post with the id an image and return either a matching image or a generic image.

matchImage(post, image) {
  if (post.id === image.id) {
    return image.image
  } else {
    return '../../../assets/white.jpg'
  }
}

and in your html file:

<div  *ngFor="let post of allPortafolio;let i=index">
  //NgFor that bring me all cards from back
  //some code
  <ngb-carousel>
    //carousel specific for one card where in i want to loop over the array of images
    <ng-template ngbSlide *ngFor="let image of arrayOfImages">
      <img [src]="matchImage(post, image)">
    </ng-template>
  </ngb-carousel>
</div>

if you want a stackblitz demo, just make a small reproducible demo of you problem and I will be glad to modify it with this solution.

Elmehdi
  • 1,390
  • 2
  • 11
  • 25
  • keeps acting the same way but in this case as it doesn't have an a;lternative template simply the card just distortionates when the image doens't match – Enrique GF Oct 05 '20 at 19:24
  • https://drive.google.com/file/d/1YtP6hEWOh3GxVrQgP-KWwd2uaEL9DCXu/view?usp=sharing – Enrique GF Oct 05 '20 at 19:26
  • check your default image, maybe the problem comes from it – Elmehdi Oct 05 '20 at 19:27
  • the problem is that i dont want to have a default image while the loop goes ,thats how currently it works....my idea is deleteing that image by default and simply asign to each and every card its proper bunch of images attuning with the id of the image in fact – Enrique GF Oct 05 '20 at 19:36