Javascript 将角度反应形式的setTimeout()替换为可观察的
我想用角度反应形式的可观测值替换settimut() 我有一个孙子组件,它服务于更大的反应式表单的一部分,从API端点接收数据对象数组,将数据打包到表单数组中,并将其提交到表单。这很有效 问题在于,我们的API端点的异步性质导致这个孙子组件的表单数据在新数据能够初始化自身、清除旧数据并重新填充新数据之前呈现旧数据。我们已经用500毫秒的setTimout()解决了这个问题。它在前端工作得很好 问题是setTimeout()导致e2e测试失败,因为它在加载数据之前完成了测试。另外,超时不是解决此异步问题的长期解决方案。。。特别是如果数据有时可能需要超过1/2秒(不是通常的情况,但肯定是合理的) 我希望用一个可观察的解决方案来代替我的超时,这是一个更好的解决方案,它不会阻止我们的测试,并且可以更安全地处理异步。问题是,我无法让可观察的工作,我仍然是一个RxJS新手 以下是当前正在运行的具有超时的原始函数:Javascript 将角度反应形式的setTimeout()替换为可观察的,javascript,angular,typescript,rxjs,Javascript,Angular,Typescript,Rxjs,我想用角度反应形式的可观测值替换settimut() 我有一个孙子组件,它服务于更大的反应式表单的一部分,从API端点接收数据对象数组,将数据打包到表单数组中,并将其提交到表单。这很有效 问题在于,我们的API端点的异步性质导致这个孙子组件的表单数据在新数据能够初始化自身、清除旧数据并重新填充新数据之前呈现旧数据。我们已经用500毫秒的setTimout()解决了这个问题。它在前端工作得很好 问题是setTimeout()导致e2e测试失败,因为它在加载数据之前完成了测试。另外,超时不是解决此异
setTimeout(() => {
this.dataRow = [];
for (let item of this.data.row) {
this.dataRow.push(item);
}
}, 500);
以下是我尝试用可观察到的
this.dataRow = [];
this.dataEmitter = from(this.data.row).pipe(delay(1000)).subscribe(data => this.dataRow.push(data);)
我的代码创建了一个数据流,但似乎与超时的工作方式不同。我怎样才能做到这一点?这是解决这个问题的正确方法吗?非常感谢您的建议。您的代码如下:
this.dataRow = []
of(this.data.row)
.pipe(delay(500))
.subscribe(data => {
for(let item of data) {
this.dataRow.push(item);
}
})
编辑:
延迟(1000)
延迟1秒。每一次发射。并且您的代码段不正确-您不能推送(行)
,因为行
是未定义的
(如代码段所示)
因此,如果this.data.row
是一个对象,如果您想在“peaces”中发出this.data.row
,则需要将其设置为可编辑(类似于数组)
但是如果您只是想摆脱setTimeout
:
this.dataEmitter = from([this.data.row]).pipe(delay(1000)).subscribe(row => {
for (let item of row) {
this.dataRow.push(item);
}
}
您的代码中有这一行
this.dataRow.push(row)代码>。是否确实要按行
,而不是按项
?@AsimHashmi。你说得对。我在键入示例时犯了这个错误,但在我的代码库中它是正确的。谢谢你的接球。。。编辑已完成。的
非
来自您对我的代码片段的看法是正确的,我在示例中错误地转换了代码,并编辑了我的问题。谢谢你捕捉到了这一点。我的observable正在正确地迭代数据。我正在寻找一个“行”对象数组,并正确地接收到它数组(11)中的行[{…},{…},{…},{…},{…},{…},{…},{…},{…},{…},{…}]``好的,如果你只需要去掉setTimeout-我根据RxJS文档编辑过,zip已经被去除了吗?这将每500毫秒触发一次,我认为OP只需要一个初始延迟,而不是一个持续运行的延迟。@AdrianBrand我更新了代码,并将从
更改为的,它将发射整个数组,而不是发射每个值
this.dataEmitter = from([this.data.row]).pipe(delay(1000)).subscribe(row => {
for (let item of row) {
this.dataRow.push(item);
}
}