0

我有一个存储图像数据的函数，例如名称。通过 * 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>

图片1

这是数据库中每个图像的保存数据。

图片1

通过（单击）框图像，它返回我的 ID，我执行 get 到文件夹以获取具有相同 ID 的图像。

如何在不使用 click 的情况下执行此操作并且加载所有图像而无需一一单击来执行该功能？

获取图像函数

ImageInfo(e, id) {
    if (e != null) {
      this.ID = id;
    }
    let self = this;
      self.homeService.getImage(self.ID).then(function (resultado) {
        if (resultado) {
          self.Imagenss = resultado;
        }
      }).catch();
  }
4

2 回答 2

0

据我了解，您想立即显示图像而不做任何逻辑？

收到产品后尝试获取所有图片 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>

在那个子组件里面是这样的：

@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>
于 2019-11-12T15:20:00.243 回答
0

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

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#A_simple_example

于 2019-11-12T16:45:17.493 回答