Wikipedia:Reference desk/Archives/Computing/2020 March 30

Welcome to the Wikipedia Computing Reference Desk Archives
The page you are currently viewing is a transcluded archive page. While you can leave answers for any questions shown below, please ask new questions on one of the current reference desk pages.

March 30

Angular component not updating

I have run into a strange problem with Angular at work.

I have this kind of HTML table on an Angular component:

<table>
  <tbody>
    <tr *ngFor="let tag of form.tags">
      <td>value of tag is {{tag.value}}</td>
    </tr>
  </tbody>
</table>

and then in the Angular component there is this kind of code:

getData() {
  this.service.getData().subscribe(
    data => {
      this.form = data.form;
    });
}

Everything works all OK the first time getData() is called. But on subsequent calls, even if the data.form object returned by the service changes, the HTML page stays as it is.

I found this StackOverflow post and added a call to this.cdr.detectChanges(); in the getData() function, which solved the problem.

But my question is, why is Angular not updating the HTML page automatically when the data in the code changes? JIP | Talk 21:20, 30 March 2020 (UTC)