Угловое обновление ngFor с асинхронностью, наблюдаемой после POST - PullRequest
Новая
       35

Угловое обновление ngFor с асинхронностью, наблюдаемой после POST

0 голосов
/ 12 декабря 2018

Таким образом, я отображаю свои изображения из 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, который я использую дляотображать изображения, так как я могу после успешного пост-запроса поместить его в массив 'imagesID' в моей наблюдаемой currentGallery $ , чтобы ngFor мог обновляться без второго GET после POST?

Или, может быть, есть какой-то другой более правильный путь?

1 Ответ

0 голосов
/ 12 декабря 2018

Вы можете использовать другую 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, вы можете напрямую передать данные (новый идентификатор) в этот массив 

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>
...