Ionic 在等待从服务器检索图像时显示加载 backbone

mnemlml8  于 2023-09-28  发布在  Ionic
关注(0)|答案(1)|浏览(137)

在我的Ionic应用程序中,我显示了一个真实的地产列表,其中包含图像和信息,如标题,价格等。当从数据库中检索内容时,应用程序显示 backbone 加载。属性信息从MongoDB数据库中检索,而图像从AWS S3存储桶中检索。
我的问题是,MongoDB的响应比AWS的响应快得多(显然),当我从Mongo获取属性信息时, backbone 加载被实际内容取代,而不是图像。我一直在尝试一些方法来显示从MongoDB加载的信息,同时保持图像的 backbone 加载,直到它们加载,但无法找到解决方案。
这是HTML代码:

<div
        class="card"
        *ngFor="let property of properties"
        (click)="viewProperty(property._id, property.tipoPropiedad)"
      >
        <swiper-container [direction]="'horizontal'" no-padding id="slider">
          <swiper-slide *ngFor="let picture of this.property.pictures">
            <img [src]="picture" alt="Foto" class="thumbnail" />
          </swiper-slide>
        </swiper-container>
        <div class="details">
          <p class="title">{{property.titulo}}</p>
          <span class="location" *ngIf="property.ocultarUbicacion !== 'true'">
            {{property.ubicacion.calle}}, {{property.ubicacion.localidad}}
          </span>
          <p class="price" *ngIf="property.operacion === 'alquiler'">
            {{property.precioFormateado}} Mes
          </p>
          <p class="price" *ngIf="property.operacion === 'venta'">
            {{property.precioFormateado}}
          </p>
        </div>
      </div>

这是我的组件代码:

async getProperties(proptype: any, operation: any) {
     this.propertiesService.getPropertiesPagination(proptype, operation).subscribe((res: any) => {
      this.properties = res.properties;
      this.page++;
      this.isLoading = false;
      res.properties.forEach(async (property) => {  
        const picuresEncoded = [];
        property.pictures.forEach(async (picture) => {
          const encodedPictureKey = encodeURIComponent(picture.Key);
          const src = `http://localhost:3000/properties/getImage/${encodedPictureKey}`;
          picuresEncoded.push(src);
        });
  
        property.pictures = picuresEncoded;
      });
    });
  }

这是我的express服务器的代码,它从AWS获取图像:

const getImage = async (req, res) => {
  const AWSs3 = new AWS.S3({
    accessKeyId: process.env.AWS_KEY,
    secretAccessKey: process.env.AWS_SECRET,
    region: process.env.AWS_REGION,
  });

  const params = {
    Bucket: process.env.AWS_BUCKET_NAME,
    Key: req.params.pictureKey,
  };

  const data = await AWSs3.getObject(params, (err, data) => {
    if (err) {
      console.log(err);
      res.status(504).send("Internal error");
      return;
    }

    res.write(data.Body, "binary");
    res.end(null, "binary");
  });
};

有没有一种方法可以保持我从服务器获取图像的方式,并且在加载图像的同时仍然显示 backbone 加载?

pvabu6sv

pvabu6sv1#

属性信息从MongoDB数据库中检索,而图像从AWS S3存储桶中检索。
所以你应该做的是使用rxjs ForkJoin合并这些调用,以便在一个地方访问它们的所有结果:Angular rxjs: How to make multiple calls to the same API and mark and combine results

相关问题