Question

所以我这样显示来自HTTP GET的图像

<div *ngFor="let item of (currentGallery$ | async)?.imagesID" class="col-4">
     <img class="img-fluid" src="url/{{item}}/thumb">
</div>

但是在将图像上传到服务器并在图库中显示新图像时会发生问题。

到目前为止，我唯一的解决方案是上传POST之后，触发新的GET请求，但这似乎很糟糕。

this.http.post(url, formImageData).subscribe(data => {
    this.currentGallery$ = this.http.get<GalleryData>('url');
}

我的帖子返回了用于显示图片的上传的imageID，因此如何在成功发布请求后将其放入可观察的 currentGallery $ 中的数组'imagesID' >，那么ngFor可以在POST之后没有第二次GET的情况下进行自身更新吗？

或者也许还有其他更合适的方法？

Answer 1

您可以利用另一个component property来存储array数据，而不是直接在Observable上进行操作，因此可以轻松推送新生成的image id在里面。

伪代码

public currentGallery = [];

ngOnInit(){
   // This should ideally happen from the service and map the data back to component
    this.http.get(url).subscribe(data => {
         this.currentGallery = data['imagesID'];
   });   
}

一旦您收到POST请求的响应，就可以直接将数据（新ID）推送到该数组中

this.http.post(url, formImageData).subscribe(data => {
    this.currentGallery.push(data.id)
}

并且for循环现在将遍历数组，而不是Observable数组

<div *ngFor="let item of currentGallery" class="col-4">
     <img class="img-fluid" src="url/{{item}}/thumb">
</div>

POST后可观察到带有异步的角度刷新ngFor

1 个答案: