angular - 保留多个 Observable 的类型在 Angular 下使用来自 rxjs 的 combineLatest()?
问题描述
当我的组件加载时,我需要使用两个服务。两者都需要在继续有意义之前完成。这些完成的顺序是随机的,不应该连续组成。设置遵循以下模式。
const observables = [
this.donkeyService.getDonkey(),
this.monkeyService.getMonkey()
];
combineLatest(observables)
.subscribe(([donkeyResult, monkeyResult]) => {
if (!!donkeyResult && !!monkeyResult) {
...
}
}
我们注意到结果没有按预期输入。我们花了一段时间才意识到这一点,但是donkeyResult的类型不是Donkey,尽管下面定义了服务器!
getDonkey() : Observable<Donkey> { ... }
最后,我意识到当元素被传递到接收数组时,它们会失去类型,因为数组本身是any[]。所以我们使用强制转换来管理它,如下所示。
const observables = [
this.donkeyService.getDonkey(),
this.monkeyService.getMonkey()
];
combineLatest(observables)
.subscribe(([_1, _2]) => {
const donkeyResult = _1 as Donkey;
const monkeyResult = _2 as Monkey;
if (!!donkeyResult && !!monkeyResult) {
...
}
}
我想重构代码,以便该数组将保留服务方法签名指定的类型,并且不会合并成一个共同的分母any。
是否可以让 TypeScript 和/或 Rxjs 有一个数组,其中第一个元素是Donkey和第二个Monkey?我可以使用与数组不同的数据结构吗?
我尝试了(当然失败了)一堆不同的方法,包括像这样直接在数组中强制转换类型。
...
.subscribe(([_1 as Donkey, _2 as Monkey]) => { ... }
有没有一种巧妙的方法来保持类型?我们对完全改变方法持开放态度,因为我们拥有这部分软件并有一些额外的时间来修改代码。
解决方案
首先,你必须输入你的函数和你的 HTTP 调用。
getMonkey(): Observable<Donkey> {
return this.http.get<Donkey>(url);
}
完成后,您必须输入 observables 数组:
const observables: [Monkey, Donkey] = [
this.getMonkey(),
this.getDonkey(),
];
最后,虽然不是必需的,但您可以输入回调参数:
forkJoin(observables).subscribe(([monkey, donkey]: [Monkey, Donkey]) => {...});
推荐阅读
- javascript - 使用 Jest 测试预期会失败的 Promise
- python-3.x - sqlite3.ProgrammingError:提供的绑定数量不正确。跟随CS50
- postgresql - 如何使 PostgreSQL 数据库始终可以从不同的计算机访问?
- java - h2 数据库 - 无法在 spring boot 应用程序中的 h2 db 中创建表
- google-chrome-extension - 允许用户在本地存储和同步存储之间进行选择的最佳实践?
- tensorflow - 使用 Tensorflow.js 学习 XOR
- python - Python Tkinter treeview mysql 编辑库存
- php - 通过php显示mysql表的几行
- java - java - 如何在java spring中重命名@Embeddable的级联对象列名?
- python - 如何自动更新 tkinter ui