javascript - 用 Observable 替换 Angular Reactive Form 中的 setTimeout()

Question

我想用 Angular react 形式的 Observable 替换 setTimout()。

我有一个孙组件，它为较大的响应式(Reactive)表单的一部分提供服务，从 API 端点接收数据对象数组，将该数据打包到表单数组中，然后将其提交到表单。这效果很好。

问题在于我们的 API 端点的异步特性导致该孙组件的表单数据在新数据可以初始化自身并清除旧数据并重新填充新数据之前呈现旧数据。我们通过 500 毫秒的 setTimout() 解决了这个问题。它在前端运行良好。

问题是 setTimeout() 导致我们的 e2e 测试失败，因为它在加载数据之前完成了测试。另外，超时并不是这个异步问题的长期解决方案...特别是如果数据偶尔需要超过 1/2 秒(不是常见情况，但绝对合理)。

我希望将超时替换为可观察的，作为更好的解决方案，它不会阻止我们的测试并且可以更安全地处理异步。问题是我无法让 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);
  }
}