使用Observable in Angular定期使用http服务中的数据2/4
问题描述:
我正在学习使用angular(4)作为我的REST api后端的前端。使用Observable in Angular定期使用http服务中的数据2/4
我目前有一个PostList组件显示帖子列表。我在我的daoService中使用返回一个Observable>,并在我的PostListComponent中的onInit中引用这个。 这一切工作正常,即时通讯相当满意,但我想使用像间隔这样的东西,每5秒自动进行一次呼叫。 我最初尝试遵循一些类似的模式,如在https://angular.io/docs/ts/latest/tutorial/toh-pt6.html#!#sts=Observables的官方角度站点中所看到的,但是用例不够充分,我的项目结构足够差,导致我遇到了实际的问题,最终放弃了它。我有谷歌周围相当多,并正在努力找到一个直接的方式,我可以定期从我的api使用观察员/用户模式间隔一段时间使用数据。
任何关于如何修改下面的代码以便间隔进行调用的建议对我来说都是非常有用的,我想,很多其他开发人员都对角度很陌生。
import { Injectable } from '@angular/core';
import { Http, RequestOptions } from '@angular/http';
import {Post} from '../class/post';
import 'rxjs/add/operator/toPromise';
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
@Injectable()
export class PostDaoService {
private jwt: String;
private commentsUrl = 'http://MYDOMAIN/posts';
constructor(private http: Http, private opt: RequestOptions) {
// tslint:disable-next-line:max-line-length
this.jwt = 'eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJQYXNjYNFHUHSFWQiOiIxMjMiLCJyb2xlIjoiYWRtaW4ifQ.4D9TUDQAgIWAooyiMN1lV8Y5wVCrIF4rAeGzFzelSE9diqHMik9WE9x4EsNnEcxQXYATjxAZovpp-m72LpFADA';
}
getPosts(): Observable<Array<Post>> {
this.opt.headers.set('Authorization', 'Bearer ' + this.jwt);
this.opt.headers.set('Content-Type', 'application/json');
return this.http.get(this.commentsUrl)
.map((response) => response.json())
.map((data: any) => {
return data._embedded.posts as Post[];
});
}
}
import { ContextMenuService } from '../../../baseui-module/context-menu/context-menu.service';
import { Post } from '../../class/post';
import { PostDaoService } from '../../service/post-dao.service';
import {Component, Input, OnInit} from '@angular/core';
@Component({
selector: 'app-post-list',
templateUrl: './post-list.component.html',
styleUrls: ['./post-list.component.css']
})
export class PostListComponent implements OnInit {
posts: Post[];
constructor(public service: ContextMenuService, public dao: PostDaoService) { }
ngOnInit() {
this.service.postItems();
this.dao.getPosts().subscribe((data: Array<Post>) => {
this.posts = data;
});
}
public getItems(): Post[] {
return this.posts;
}
}
答
的技巧是使用一个mergeMap
/flatMap
(取决于您rxjs版本):
getPosts(trigger: Observable<any>): Observable<Array<Post>> {
this.opt.headers.set('Authorization', 'Bearer ' + this.jwt);
this.opt.headers.set('Content-Type', 'application/json');
return trigger.flatMap(() =>
this.http.get(this.commentsUrl)
.map((response) => response.json())
.map((data: any) => {
return data._embedded.posts as Post[];
});
}
然后在您的组件:
this.dao.getPosts(Observable.timerInterval(0, 5000)
.subscribe(data => ....);
很明显,你可以用它其他触发器:
this.dao.getPosts(Observable.fromEvent(refreshButton, 'click'))
要刷新的时候刷新按钮被点击
顺便说一句,你可能想避免订阅,而是定义:
this.posts$ = this.dao.getPosts(...);
,并在您的模板:
<any *ngFor="let post of posts$">post display here</any>
这将是更有效并降低用户和内存泄漏的风险。
不幸的是,timerInterval(n,m)在Observable中不可用,所以我将其更改为修正编译错误的间隔(5000),但是现在我得到以下错误:core.es5.js:1084错误错误:未捕获in promise):TypeError:__WEBPACK_IMPORTED_MODULE_3_rxjs_Observable __。Observable.interval不是函数 TypeError:__WEBPACK_IMPORTED_MODULE_3_rxjs_Observable __。Observable.interval不是函数 – gezinspace
您是否添加了导入?我认为这是导入'rxjs/observable/add/interval' – Meir
我只是明确导入,现在它说,flatMap(或mergeMap)不是一个函数。尝试明确导入这些,但无处可去。编辑:另外,如果我暂时交换触发变量为Observable对象。这样我可以检查API,这些功能都不可用 – gezinspace