[英]Simple filter on array of RXJS Observable
我正在使用Angular2开始我的项目,开发人员似乎推荐RXJS Observable而不是Promises。
我已经实现从服务器检索元素列表(史诗)。 但是我如何通过使用例如id来过滤元素?
以下代码是从我的应用程序中提取的,现在显示最终的工作解决方案。 让我们希望它有所帮助。
@Injectable()
export class EpicService {
private url = CONFIG.SERVER + '/app/'; // URL to web API
constructor(private http:Http) {}
private extractData(res:Response) {
let body = res.json();
return body;
}
getEpics():Observable<Epic[]> {
return this.http.get(this.url + "getEpics")
.map(this.extractData)
.catch(this.handleError);
}
getEpic(id:string): Observable<Epic> {
return this.getEpics()
.map(epics => epics.filter(epic => epic.id === id)[0]);
}
}
export class EpicComponent {
errorMessage:string;
epics:Epic[];
epic:Epic;
constructor(
private requirementService:EpicService) {
}
getEpics() {
this.requirementService.getEpics()
.subscribe(
epics => this.epics = epics,
error => this.errorMessage = <any>error);
}
// actually this should be eventually in another component
getEpic(id:string) {
this.requirementService.getEpic(id)
.subscribe(
epic => this.epic = epic,
error => this.errorMessage = <any>error);
}
}
export class Epic {
id: string;
name: string;
}
预先感谢您的帮助。
你想要过滤实际的数组,而不是包围它的observable。 因此,您将Observable(这是一个Epic[]
)的内容映射到过滤的Epic
。
getEpic(id: string): Observable<Epic> {
return this.getEpics()
.map(epics => epics.filter(epic => epic.id === id)[0]);
}
然后你可以subscribe
getEpic
并用它做你想做的任何事情。
您可以使用Observable
的flatMap
和filter
方法而不是map
中的JS数组过滤器方法来完成此操作。 就像是:
this.getEpics()
.flatMap((data) => data.epics) // [{id: 1}, {id: 4}, {id: 3}, ..., {id: N}]
.filter((epic) => epic.id === id) // checks {id: 1}, then {id: 2}, etc
.subscribe((result) => ...); // do something epic!!!
flatMap
将提供用于过滤的单个索引,然后您可以继续使用结果接下来发生的任何事情。
如果TypeScript抛出一个错误,指示无法比较字符串和数字,无论您在过滤器中使用==
,只需在过滤器中按epic.id
添加一个+
,按照Angular文档:
.flatMap(...)
.filter((epic) => +epic.id === id) // checks {id: 1}, then {id: 2}, etc
.subscribe(...)
例:
https://stackblitz.com/edit/angular-9ehje5?file=src%2Fapp%2Fapp.component.ts
原始答案有一个修复: Observables
是懒惰的。 你必须调用subscribe
告诉一个observable
发送它的请求。
getEpic(id:number) {
return this.getEpics()
.filter(epic => epic.id === id)
.subscribe(x=>...);
}
更新到Rxjs 6:
import {filter} from 'rxjs/operators';
getEpic(id:number) {
return this.getEpics()
.pipe(filter(epic => epic.id === id))
.subscribe(x=>...);
}
您必须订阅Observable
才能获取数据,因为http调用在JavaScript中是异步的。
getEpic(id: number, callback: (epic: Epic) => void) {
this.getEpics().subscribe(
epics: Array<Epic> => {
let epic: Epic = epics.filter(epic => epic.id === id)[0];
callback(epic);
}
);
}
您可以像这样调用该方法:
this.someService.getEpic(epicId, (epic: Epic) => {
// do something with it
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.