Angular 如何获取所有图像

我有一个存储图像数据的函数，比如名称。通过*ngFor，我可以将这些数据加载到数据库中，并显示在框中

Html

<div class="row tab-pane Galeria">
        <div *ngFor="let product of products" (click)="ImageInfo($event,product.id)" class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
          <div class="image-item">
            <a class="d-block image-block h-100" >
              <img [src]="Imagenss"  class="Images img-fluid" alt="">
              <div class="ImageText"> {{product.name}}</div>
            </a>
          </div>
        </div>
      </div>

---

据我所知，你想不做任何逻辑就立即显示图像吗

在收到产品后，尝试获取所有图像URL

例如，将其移动到分离的组件：

<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
  <div class="image-item">
    <a class="d-block image-block h-100" >
      <img [src]="Imagenss"  class="Images img-fluid" alt="">
        <div class="ImageText"> {{product.name}}</div>
     </a>
   </div>
 </div>

然后，从父组件将产品作为输入传递，例如：

<div class="row tab-pane Galeria">
 <example-component *ngFor="let product of products" [product]="product"><example-component>
</div>

---

这取决于您必须加载多少图像。如果数据库中有数以百万计的图像要显示，则最初无法加载所有图像。最好使用延迟加载。在Java脚本中，您可以使用Intersection observer来处理加载过程

---

答案更像是评论。所以请把它放在评论里。当然，我计划得到所有的图片URL，但是我怎么能做到呢？我们的目标是要有一个功能，加载所有的图像，没有点击，根据我从产品中得到的id。我试图了解你的情况。如果我错了，请纠正我。现在，您正在单击特定产品并显示与特定产品关联的图像列表。现在你想不点击就显示它吗？

@Input() product: TypeOfProduct
 ngOnInit() {
   this.homeService.getImage(this.product.ID).then((resultado) => {
    if (resultado) {
      this.imagenss = resultado;
    }
  }).catch();
 }

<div class="row tab-pane Galeria">
 <example-component *ngFor="let product of products" [product]="product"><example-component>
</div>