在 Angular 中创建数据流
Create data stream in Angular
我有一个使用 Observable 从数据库获取数据的服务。似乎它只获取一次数据。我希望它在用户将数据添加到数据库然后流式传输到 Angular.
时进行监听
获取所有数据的服务
getAllProj(): Observable<NouveauProjet[]> {
return this.http.get<NouveauProjet[]>(
"http://127.0.0.1:8081/api/proj/projets"
);
}
添加数据服务
addProj(nouveauProjet: NouveauProjet): Observable<any> {
return this.http.post<NouveauProjet[]>(
"http://127.0.0.1:8081/api/proj/projets",
nouveauProjet
);
}
当我使用我的服务时,我只订阅了它们
getAllProj() {
this.ajoutProj.getAllProj().subscribe(
response => {
console.log("hello"+response);
this.nouveauProjet=response;
},
error => console.log(error)
);
我认为当新数据添加到数据库时,Observable 仍然会监听服务器,但事实并非如此,所以我如何将我的 observable 转换为数据流。
简短的回答是Websockets
。这实际上是一个服务器端问题。
你的 API 永远不会 'push' 在更新数据库时输出数据,除非你告诉它这样做,最简单的方法是使用 Websockets。我会提供一个示例实现,但是有很多变数,尤其是当您正在监视数据库更新并相应地推送信息时。
Observable 是一个数据流。如果您为服务中的同一个 API 调用设置多个订阅,当从 API 中提取新数据时,每个订阅都将获得新值。问题是 HTTP 请求就是来自客户端的 'requests'。
这里是一些如何手动创建数据流的示例,因此您可以在最后测试您的代码是否正常工作。
let arr = [];
setInterval(() => arr.push((Math.random())), 1001);
return interval(2000).pipe(map(i => arr));
如果解决方案不是您所期望的,那么就把它留给像我这样正在学习rxjs的初学者,以便他们提高自己的rxjs技能。
我有一个使用 Observable 从数据库获取数据的服务。似乎它只获取一次数据。我希望它在用户将数据添加到数据库然后流式传输到 Angular.
时进行监听获取所有数据的服务
getAllProj(): Observable<NouveauProjet[]> {
return this.http.get<NouveauProjet[]>(
"http://127.0.0.1:8081/api/proj/projets"
);
}
添加数据服务
addProj(nouveauProjet: NouveauProjet): Observable<any> {
return this.http.post<NouveauProjet[]>(
"http://127.0.0.1:8081/api/proj/projets",
nouveauProjet
);
}
当我使用我的服务时,我只订阅了它们
getAllProj() {
this.ajoutProj.getAllProj().subscribe(
response => {
console.log("hello"+response);
this.nouveauProjet=response;
},
error => console.log(error)
);
我认为当新数据添加到数据库时,Observable 仍然会监听服务器,但事实并非如此,所以我如何将我的 observable 转换为数据流。
简短的回答是Websockets
。这实际上是一个服务器端问题。
你的 API 永远不会 'push' 在更新数据库时输出数据,除非你告诉它这样做,最简单的方法是使用 Websockets。我会提供一个示例实现,但是有很多变数,尤其是当您正在监视数据库更新并相应地推送信息时。
Observable 是一个数据流。如果您为服务中的同一个 API 调用设置多个订阅,当从 API 中提取新数据时,每个订阅都将获得新值。问题是 HTTP 请求就是来自客户端的 'requests'。
这里是一些如何手动创建数据流的示例,因此您可以在最后测试您的代码是否正常工作。
let arr = [];
setInterval(() => arr.push((Math.random())), 1001);
return interval(2000).pipe(map(i => arr));
如果解决方案不是您所期望的,那么就把它留给像我这样正在学习rxjs的初学者,以便他们提高自己的rxjs技能。