CODEWITHSUNDEEP
angulartypescript
cfoster5
cfoster5

Reputation: 1826

*ngFor not updating until click

I have created a table with an *ngFor that displays data from a web request. Here is the templates code:

...
  <tr *ngFor="let task of tasks">
    <td>{{task.ID}}</td>
    <td><a (click)="openTaskArea(task.TaskType0.ID)" class="viewLink">{{task.TaskType0.Title}}</a></td>
    <td><a (click)="editTask(task.ID)" class="viewLink"></a></td>
    <td><a (click)="openTask(task.ID)" class="viewLink">{{task.Title}}</a></td>
    <td>
      <ng-container *ngIf="task.AssignedTo">{{task.AssignedTo.Title}}</ng-container>
    </td>
  </tr>
...

This web request is fired on load and when a modal that allows a new item to be created is closed.

Here is the function that gets this data:

getTasks() {
this.http.get(`https://example.com/_api/web/lists/getbytitle('Tasks')/items`).subscribe(data => {
  // console.log(data['value'])
  this.tasks = data['value']
  console.log(this.tasks)
})
}

This function is fired when the modal is closed with the following function:

(function() {
  this.getTasks();
}).bind(this);

Binding this was required as it's context was getting lost. This was a recommended solution for this question.

The request is completing correctly as I can log this.tasks however, the DOM is not being updated until I click a link from the table.

How can I solve this?

Upvotes: 3

Views: 1968

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222722

You can try manually calling detectChanges to make the rendering happen,

import { ChangeDetectorRef } from 'angular/core';

constructor(private chRef: ChangeDetectorRef){
}

Then use:

chRef.detectChanges(); // whenever you need to force update view

Upvotes: 6

Related Questions