我如何使用 *ngFor 或其他东西在每个 div 上显示不同的图像？

Question

这是定制的画廊，现在我想在包装上使用滴定法，在每个 div 上都有一个不同的图像。而我的代码在整个画廊中重复单个图像

HTML

<div class="wrapper" *ngFor="let data of collection" >
  <div class="row mt-5 paddingP">
    <div class="col-4 top3images " >
      <img class="top3"
        src={{data.completeIamgepath}}
        alt="">
      <button class="icon"><i class="fa fa-bookmark-o" aria-hidden="true"></i> </button>
      <label class="label">207 Products</label>
    </div>
    <div class="col-4 top3images">
      <img class="top3 " src={{data.completeIamgepath}} alt="">
      <button class="button"> Save </button>
      <label class="label">207 Products</label>
    </div>
    <div class="col-4 top3images">
      <img class="top3 "
      src={{data.completeIamgepath}}
        alt="">
      <button class="icon"><i class="fa fa-bookmark-o" aria-hidden="true"></i> </button>
      <label class="label">207 Products</label>
    </div>
  </div>

 

  <div class="wrapper paddingrightleft  secondrowmargintop ">
    <div class="row paddingR">
      <div class="col-7">
        <div class="row">
          <div class="col-12 padding0 ">
            <img class="imgs2ndrow"
            src={{data.completeIamgepath}}
              alt="">
            <button class="button"> Save </button>
            <label class="label">107 Products</label>
          </div>
        </div>

Answer 1

通过您的模板，我看到您希望显示“收藏”中的图片。你确定你的收藏中有不同的图片吗？您可以通过在模板 {{collection | json}} 如果“data.completeIamgepath”字段确实有不同的图片，那么先尝试关闭模板，也就是你给的那段代码作为例子是不完整的。你的“包装器”类的 div 没有关闭。