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...

Answer 1

您必须使用this.ref.markForCheck();

Answer 2

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