有没有办法等待 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 应该没问题，据我所知，是 "the way that it's done"。

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

Answer 2

对我来说，这是 100% 的反应式表单用例，而不是模板驱动的表单：

<form [formGroup]="itemsFa">
  <input *ngFor="let item of itemsFa.controls; index as i" [name]="'input_' + i" [formControlName]="i">
</form>


constructor(private fb: FormBuilder) {
  this.itemsFa = this.fb.array([]);
}

updateAndSubmit() {
  this.itemsFa.clear();
  newItems.forEach(item => {
    const fc = new FormControl(item, [myValidator]); // convert validation directive to validator fn
    this.itemsFa.push(fc)
  });
  if (this.itemsFa.valid) {
    // Do stuff with valid form
  }
}

闪电战示例：https://stackblitz.com/edit/angular-h5rhgx?file=src%2Fapp%2Fapp.module.ts

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

Is there a way to wait for the DOM to update in Angular?

angular

angular-forms