4 Replies - 243 Views - Last Post: 07 January 2019 - 05:54 AM Rate Topic: -----

#1 andrewsw   User is online

  • quantum multiprover
  • member icon

Reputation: 6778
  • View blog
  • Posts: 27,963
  • Joined: 12-December 12

angular 2, disable cache response

Posted 07 January 2019 - 03:26 AM

I have an ASP.NET Core/Angular 2 application. When I get a list of contacts I need to disable the cache so that a new (base64) headshot/image is displayed. Do you know where, and how, I can disable the caching?

In the service? I'm not sure how to provide the setting, I believe it used to be just cache: false as a config, but this no longer appears to be simple setting.

  getContacts(): Observable<ServerResponse<Contact>> {

    return this.http.get<ServerResponse<Contact>>(this.contactsUrl);
      //.catch(this.handleError); now is 'catchError'
  }

Or perhaps it is on configuring the Kendo Upload component?

var upload = kendo.jQuery('#headshotFile').data('kendoUpload');

It is a little odd that the new image is not displayed because it is actually the entire 'src' that has a new value:

kendo.jQuery('#headshot').attr('src', 'data:image/png;base64,' + e.model.headshot);


Is This A Good Question/Topic? 0
  • +

Replies To: angular 2, disable cache response

#2 andrewsw   User is online

  • quantum multiprover
  • member icon

Reputation: 6778
  • View blog
  • Posts: 27,963
  • Joined: 12-December 12

Re: angular 2, disable cache response

Posted 07 January 2019 - 03:35 AM

Mmm, I don't think caching is the issue. I think that, although a new image is being saved to the database, it is the existing Angular model that needs to be updated to reflect the new headshot.

I'll pursue this further.
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw   User is online

  • quantum multiprover
  • member icon

Reputation: 6778
  • View blog
  • Posts: 27,963
  • Joined: 12-December 12

Re: angular 2, disable cache response

Posted 07 January 2019 - 03:58 AM

Somehow... I need to 'update' the item/Contact in the current model after the new data is inserted or updated:

  public new(contact: Contact) {
    return this.http.post<ServerResponse<Contact>>(this.contactsUrl, contact)
      .pipe(map(res => res)
        //,catchError((err: HttpErrorResponse) => {})
      );
  }

  public update(contact: Contact) {
    return this.http.put<ServerResponse<Contact>>(this.contactsUrl + '/' + contact.contactID, contact)
      .pipe(map(res => res)
        //,catchError((err: HttpErrorResponse) => {})
      );
  }

Was This Post Helpful? 0
  • +
  • -

#4 andrewsw   User is online

  • quantum multiprover
  • member icon

Reputation: 6778
  • View blog
  • Posts: 27,963
  • Joined: 12-December 12

Re: angular 2, disable cache response

Posted 07 January 2019 - 04:59 AM

So far... when I create or update a Contact the headshot image is asynchronously updated. When saving the changes I need to somehow update the model for the contact to reflect that there is a new headshot.

In the service I have the following which should, I believe, return the updated contact details, including the new headshot:
  public new(contact: Contact) {
    return this.http.post<Contact>(this.contactsUrl, contact)
      .pipe(map(res => res)
        //,catchError((err: HttpErrorResponse) => {})
      );
  }

  public update(contact: Contact) {
    return this.http.put<Contact>(this.contactsUrl + '/' + contact.contactID, contact)
      .pipe(map(res => res)
        //,catchError((err: HttpErrorResponse) => {})
      );


In my component I retain a reference to the current model (as that.currentContact) which works fine. However, in the following, newContact() does provide me with the new record details, but in updateContact the value of ‘contact’ is null.

  newContact(contactDetails: Contact): void {
    var that = this;  // retain reference to component
    this.contactService.new(contactDetails)
      .subscribe((contact) => {
        that.currentContact.headshot = contact.headshot;
      });
  }

  updateContact(contactDetails: Contact): void {
    var that = this;  // retain reference to component
    this.contactService.update(contactDetails)
      .subscribe((contact) => {
        that.currentContact.headshot = contact.headshot;
      });
  }


Do you have an idea why the two behave differently? Do you have a suggestion for an alternative approach (Angular 2)? Do you think there might be a way to signify to Angular that the model has changed, go and get new values.



Angular is a pain in the bottom. Supposedly simple, two-way binding is not worth the hassle of such levels of complication.
Was This Post Helpful? 0
  • +
  • -

#5 andrewsw   User is online

  • quantum multiprover
  • member icon

Reputation: 6778
  • View blog
  • Posts: 27,963
  • Joined: 12-December 12

Re: angular 2, disable cache response

Posted 07 January 2019 - 05:54 AM

Darn, it turns out I needed to explicitly return the object, return Ok(contact), in the server-side PUT edit-method, it was (by default) just returning an empty string.

It's annoying when you delve into something so much only to discover that the solution is simple :gun_bandana:
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1