循环遍历对象数组以以角度填充卡片数组中的轮播

Question

我有一个由对象（id、image）组成的对象数组，并且我还有几张卡片作为我提取到后端的结果。 我想做的是在每张卡片上建立一个轮播，专门使用与卡片实际上具有的 id 匹配的图像，假设这是我的图像数组

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"}
]

让我们说在我的 html 标签上，我触发了 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>

如您所见，必须使用 else ，使用其他固定模板，而循环保持其过程与 id 条件不匹配，但美观是可怕的，因为似乎页面在不断获取充电，而不是在旋转木马中顺畅流动。

但我想知道是否有另一种选择，我可以在不使用 else 的情况下循环该对象数组，并将其各自的图像分配给每张卡片，实际上卡片的 id 匹配，因此它们各自的轮播将流畅无间断

Answer 1

实现您想要的更好的方法是在您的打字稿文件中创建一个函数，您可以在其中将帖子的 id 与 id 图像匹配并返回匹配的图像或通用图像。

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

在您的 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 [src]="matchImage(post, image)">
    </ng-template>
  </ngb-carousel>
</div>

如果您想要一个 stackblitz 演示，只需为您的问题制作一个可重现的小型演示，我很乐意使用此解决方案对其进行修改。