Update component after variable change

Question

I need to update an HTML table after updating my values. On Ionic (based on Angular) all was working fine when I was calling my datas loading function. But in Angular, whenever I call my data loading function, the array isn't updated..

I've already tried to deal with ChangeDetectorRef but nothing works...

Here are my functions :

loadCat() {
    this.apiService.listCat().then(data => {
      this.categories = data;
    });
    this.ref.detectChanges();
  }

  addCat() {
    this.apiService.createAssoc(this.label);
    this.assoForm.reset();
    this.loadAssoc();
  }

  deleteCat(id) {
    this.apiService.deleteCat(id);
    this.notify.fireSuccess("La catégorie a bien été supprimée !", "Bye bye !");
    this.loadCat();
  }

And here is a part of HTML table code :

 <tbody>
                        <tr *ngFor="let cat of categories; index as i">
                            <th scope="row">{{ i+1 }}</th>
                            <td>{{ cat.label }}</td>
                            <td><button (click)="deleteCat(cat._id)" class="btn btn-danger">Supprimer</button></td>
                        </tr>
                    </tbody>

I need by tags to be reload with my new categories values but nothing works...

you use categories in your template but i can't find where you update this variable in your component — Andriy Lozynskiy
– Andriy Lozynskiy, Commented Sep 13, 2019 at 20:03
@AndriyLozynskiy, looks like it refresh with a console.log (only with inspect tab opened)... but why ? — GermainWeb
– GermainWeb, Commented Sep 14, 2019 at 12:21

Lorenzo Muñoz · Accepted Answer · 2019-09-13 22:12:01Z

3

You must be use this.ref.markForCheck();

answered Sep 13, 2019 at 22:12

Lorenzo Muñoz

463 bronze badges

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

Comments

RandomCode · Accepted Answer · 2019-09-13 19:53:05Z

0

No point in calling change detection actually before receiving data. You should move change detection to then block because it's called asynchronously after loadAssoc has been called.

Sometimes change detection should be wrapped with setTimeout because variable perhaps hasn't been updated in time. Set timeout will trigger change detection after call stack has been cleared which will guarantee that variable had been updated.

loadAssoc() {
    this.apiService.listAssoc().then(data => {
      this.assoc = data;
      setTimeout(() => this.ref.detectChanges());
    });
  }

answered Sep 13, 2019 at 19:53

RandomCode

4234 silver badges9 bronze badges

4 Comments

srjkaa Over a year ago

Actually, you don't need to use 'setTimeout' here, just call 'detectChanges()' right after assigning 'data' to 'this.assoc'.

RandomCode Over a year ago

I agree with you. I added that just in case.

GermainWeb Over a year ago

Actually, not working in my case... Nothing reloading when calling the function..

RandomCode Over a year ago

Are you sure that 'then' block is being called? Perhaps you haven't received the response. Also i guess you know this but change detection ref works only when you are using on push change detection strategy.

Collectives™ on Stack Overflow

Update component after variable change

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related