State changes but component doesn't update - ANGULAR

Question

I'm using ionic with angular, when i'm creating alert in ok button's callback function i'm changing my state. State changes, but this change doesn't effects in iu, i think component is not updating. How can I fix this?

async presentAlert() {
    const alert = await this.alertController.create({
      header: '',
      message: '',
      buttons: [
        'cancel',
        {
          text: 'ok',
          handler: () => {
            this.currentScreen = "";
            this.dates[this.currentDateIndex].isOrdered = false;//disable order
          }
        }
      ]
    });
    await alert.present();
  }

Can you provide the full component code? It's a little hard to tell what's going on here without understanding the full context - namely, how is your component configured via its decorator, what calls presentAlert(), what the alertController is/does, etc etc. — dudewad
– dudewad, Commented Feb 10, 2020 at 18:01
I don't see a state change in there, is this the function that updates state? — Sydney Y
– Sydney Y, Commented Feb 10, 2020 at 19:27

snowrain · Accepted Answer · 2020-02-12 15:12:32Z

4

You can try to use ChangeDetectorRef to explicitly state that change has been made and view needs to be updated.

Reference: https://angular.io/api/core/ChangeDetectorRef

Example:

Declare ChangeDetectorRef in constructor

constructor(public cd: ChangeDetectorRef) {}

Then use it in your callback:

buttons: [
    'cancel',
    {
      text: 'ok',
      handler: () => {
        this.currentScreen = "";
        this.dates[this.currentDateIndex].isOrdered = false;//disable order
        this.cd.detectChanges();
      }
    }
  ]

edited Feb 12, 2020 at 15:12

answered Feb 10, 2020 at 19:18

snowrain

4525 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

State changes but component doesn't update - ANGULAR

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related