在我的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 加载?
1条答案
按热度按时间pvabu6sv1#
属性信息从MongoDB数据库中检索,而图像从AWS S3存储桶中检索。
所以你应该做的是使用rxjs ForkJoin合并这些调用,以便在一个地方访问它们的所有结果:Angular rxjs: How to make multiple calls to the same API and mark and combine results