用可观察的角度替换Angular反应形式中的setTimeout（）

Question

我想用Angular反应形式的Observable替换setTimout（）。

我有一个孙组件，该组件提供较大的反应形式的一部分，从API端点接收数据对象数组，然后将这些数据打包到一个Form Array中，然后提交给该Form。效果很好。

问题在于我们的API端点的异步性质导致该孙子组件的表单数据在新数据可以初始化自身，清除旧数据并重新填充新数据之前呈现旧数据。我们用500 ms的setTimout（）解决了这个问题。在前端效果很好。

问题在于setTimeout（）导致e2e测试失败，因为它在加载数据之前完成了测试。另外，超时不是解决此异步问题的长期解决方案……特别是如果数据偶尔需要花费超过1/2秒的时间（这不是通常情况，但绝对合理）。

我希望用一个可观察的替代我的超时作为更好的解决方案，该解决方案不会阻止我们的测试并且可以更加安全地处理异步。问题是我无法正常工作，而我仍然是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);
   }
 })