Angular 5 - 承诺后不显示新图像

Question

在我的 Angular 5 应用程序中，用户将图像上传到 API，API 以 URL 响应新图像。承诺完成后，我可以将新的图像对象添加到 DOM，但除非我重新加载页面，否则图像不会显示在 GUI 中。

页面重新加载之前：

页面重新加载后：

如何在不重新加载整个页面的情况下显示图像？

这是承诺：

    this.http.post(`${this.env.api}/v1/images`, formData)
        .map(res => res.json())
        .catch(error => Observable.throw(error))
        .subscribe(
            (response) => {
                for (let image of response.data) {
                    this.campaign.images.push(image);
                }
            },
        )

这是 HTML：

<div *ngFor="let image of campaign.images; let i = index;">
    <a [href]="image.web_url" target="_blank">
        <img src="{{ image.web_url }}?width=100&height=100">
    </a>
</div>

Answer 1

尝试以下方法：

this.http.post(`${this.env.api}/v1/images`, formData)
        .map(res => res.json())
        .catch(error => Observable.throw(error))
        .subscribe(
            (response) => {
                for (let image of response.data) {
                    let images = [...this.campaign.images];
                    images.push(image);
                    this.campaign.images = [...images];

                }
            },
        )