用 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);
   }
 })