angular - 有没有办法等待 DOM 在 Angular 中更新？

Question

如果我有类似下面的东西

<form #myForm="ngForm">
  <input *ngFor="let item of items; index as i" [name]="'input_' + i" [(ngModel)]="item" myValidationAttribute>
</form>

我有一个更新项目的功能，我需要在提交表单之前等待表单更新

updateAndSubmit() {
  this.items = newItems;
  setTimeout(() => {
    if (this.myForm.valid) {
      // Do stuff with valid form
    }
  });
}

像这样使用 setTimeout 是否是等待 DOM 刷新的首选方式，或者单元测试中是否使用了类似于 fixture.whenStable() 的方法？

setTimeout 感觉不对，就像是一个肮脏的 hack。

这是 StackBlitz https://stackblitz.com/edit/angular-pv4tyb

Answer 1

正如@Antediluvian 所说，这不是 hack，而是将回调放到事件队列的末尾，即确保回调中的代码不在当前事件循环中运行，而是在下一个事件循环中运行一个或以后。

也就是说，如果您发现自己在做这样的事情，并且需要在 setTimeout 中指定延迟，那么您就有问题了，因为您在开发中使用的延迟不太可能适用于所有客户端。

在这种情况下，您使用的简单 setTimeout 应该没问题，据我所知，这就是“完成方式”。

我知道你的实际代码更复杂，但基于这个例子，考虑到你不需要通过表单推送那个额外的值 - 你可以直接获取表单的值，然后直接修改它(或表单值的副本)以生成您使用的值(例如，发布到 API)。