Angular 5 - new images not displaying after promise

Question

In my Angular 5 app, the user uploads images to the API, which responds with URL's to the new images. After the promise is completed, I'm able to add the new image objects to the DOM, but the images don't display in the GUI unless I reload the page.

Before page reload:

After page reload:

How can I make the images show without reloading the entire page?

Here's the promise:

    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);
                }
            },
        )

And here's the 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>

Pushing items into an array often causes trouble with change detection - try replacing the whole array with a new one containing the existing and new items, instead. See e.g. https://stackoverflow.com/q/47687441/3001761 for manual change detection. — jonrsharpe, Jun 20 '18 at 16:32

score -1 · Answer 1 · answered Jun 20 '18 at 16:40

-1

Try the following:

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];

                }
            },
        )

answered Jun 20 '18 at 16:40

lifetimeLearner007

643
6
17

Hmm, I'm afraid the images still don't load. Before page reload, I see this in the inspector: ``````, and after page reload, I see this: ``````. – americanknight Jun 20 '18 at 16:46
Output image.web_url outside anchor tag {{image.web_url}} See if urls are printed before reload – lifetimeLearner007 Jun 20 '18 at 16:50
Good idea. I tried it, and the URL's are not printed before page reload. – americanknight Jun 20 '18 at 16:56
Try logging them to console in for loop of subscribe(). See if the response has urls before reload. If response is correct, try using subject/observable on campaign and watch for any changes. Hopefully this might trigger update in the property. – lifetimeLearner007 Jun 20 '18 at 17:14
Yes, all of the data is there when I log it to the console. Though I'm not sure how to "try using subject/observable on campaign". – americanknight Jun 20 '18 at 18:14
Refer this once(Triggering change detection manually): https://stackoverflow.com/questions/36919399/angular-2-view-not-updating-after-model-changes and also https://stackoverflow.com/questions/34827334/triggering-change-detection-manually-in-angular – lifetimeLearner007 Jun 21 '18 at 04:54

Angular 5 - new images not displaying after promise

1 Answers1