有沒有辦法在 Angular 中等待 DOM 更新？

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 只是感覺不對，就像是一個骯臟的黑客。

這是一個 StackBlitz https://stackblitz.com/edit/angular-pv4tyb

Answer 1

正如@Antediluvian 所說，這不是黑客攻擊，而是將回調放在事件隊列的末尾，即確保回調中的代碼不在當前事件循環中運行，而是在下一個或以后運行.

也就是說，如果您發現自己在做這樣的事情，並且需要在 setTimeout 中指定延遲，那么您就會遇到問題，因為您在開發中使用的延遲不太可能適用於所有客戶端。

在這種情況下，您使用的簡單 setTimeout 應該沒問題，AFAIK 是“完成的方式”。

我知道您的實際代碼更復雜，但基於此示例，請考慮您不需要通過表單推送該額外值 - 您只需獲取表單的值，然后直接修改（或復制的形式值）來生成您使用的值（例如，發布到 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