用 Observable 替換 Angular 響應式表單中的 setTimeout()

Question

我想用 Angular 反應形式的 Observable 替換 setTimout()。

我有一個孫子組件，它服務於較大的響應式表單的一部分，從 API 端點接收數據對象數組，將該數據打包到表單數組中，然后將其提交給表單。 這很好用。

問題是我們的 API 端點的異步特性導致這個孫子組件的表單數據在新數據可以自行初始化並清除舊數據並重新填充新數據之前呈現舊數據。 我們用 500 毫秒的 setTimout() 解決了這個問題。 它在前端運行良好。

問題是 setTimeout() 導致我們的 e2e 測試失敗，因為它在加載數據之前完成了測試。 另外，超時並不是這個異步問題的長期解決方案......特別是如果數據有時可能需要超過 1/2 秒（不是常見情況，但絕對是合理的）。

我希望用一個 observable 代替我的超時作為一個更好的解決方案，它不會阻止我們的測試並且可以更安全地處理異步。 問題是我無法讓 observable 工作，而且我仍然是 RxJS 新手。

這是當前正在運行的具有超時的原始函數：

setTimeout(() => {
      this.dataRow = [];
      for (let item of this.data.row) {
        this.dataRow.push(item);
      }
    }, 500);

這是我用 Observable 重新創建的嘗試：

this.dataRow = [];
   this.dataEmitter = from(this.data.row).pipe(delay(1000)).subscribe(data => this.dataRow.push(data);)

我的代碼創建了一個數據流，但似乎與超時不同。 我怎樣才能做到這一點？ 這甚至是解決這個問題的正確方法嗎？

Answer 1

編輯：

this.dataEmitter = of(this.data.row).pipe(delay(1000)).subscribe(row => {
  for (let item of row) {
    this.dataRow.push(item);
  }
}

---

delay(1000)延遲 1 秒。 每次發射。 而且您的代碼段不正確 - 您不能push(row)因為row undefined （如代碼段所示）。

因此，如果this.data.row是一個對象，如果您想在“和平”中發出this.data.row ，則需要使其可迭代（如數組）。

但是，如果您只想擺脫setTimeout ：

this.dataEmitter = from([this.data.row]).pipe(delay(1000)).subscribe(row => {
  for (let item of row) {
    this.dataRow.push(item);
  }
}

Answer 2

您的代碼將是這樣的：

this.dataRow = []

of(this.data.row)
 .pipe(delay(500))
 .subscribe(data => {
   for(let item of data) {
     this.dataRow.push(item);
   }
 })