angular - *ng 直到点击才更新

Question

我创建了一个带有 *ngFor 的表，用于显示来自 Web 请求的数据。这是模板代码:

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

此 Web 请求在加载时触发，并且在关闭允许创建新项目的模式时触发。

这是获取此数据的函数:

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

当使用以下函数关闭模式时会触发此函数:

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

绑定(bind) this 是必需的，因为它的上下文正在丢失。这是 this question 的推荐解决方案.

请求正确完成，因为我可以记录 this.tasks 但是，在我单击表中的链接之前，DOM 不会更新。

我该如何解决这个问题？

Answer 1

您可以尝试手动调用 detectChanges 来进行渲染，

import { ChangeDetectorRef } from 'angular/core';

constructor(private chRef: ChangeDetectorRef){
}

然后使用:

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