![](/img/trans.png)
[英]Trying to merge two observable streams with keys using CombineLatest in Angular
[英]Angular Observable combinelatest
我正在尝试构建一个组件,该组件可以访问服务并返回带有对象列表的observable来填充表
我的服务具有以下功能:
public getTranches(): Observable<Tranche[]> {
this.loadTranches(); //this calls the rest API to populate the variable _tranches
return this._tranches.asObservable(); // return variable <BehaviourSubject>_tranches asObservable
}
我的组件包括一个通过以下方式显示数据的表:
this.subscription = this.apiService
.getTranches()
.subscribe(
(data) => {
this.tranches = data;
}
);
的HTML:
<ng-container *ngFor="let tranche of tranches">
// stuff
</ng-container>
在这里util一切正常。
我在表标题中添加了输入并单击事件
//header example for sortby
<div (click)="this.filters.sortby = name"></div>
//input for filter
<input (keyup)="this.filters.search = $event.target.value" type="text">
和一个变量过滤器来存储该信息
您能告诉我如何在可观察变量中转换过滤器变量并将其合并到单个订阅中以供表格使用,以便我可以对组件执行过滤和排序吗?
我尝试使用filter作为behaviourSubject并使用CombineLatest未能成功合并它们,如果这样做的话,我可以看到一个示例吗?
如果我理解正确,则您有一个类变量_tranches ,它是BehaviorSubject,并通过next()
方法发出由表显示的项的数组arr 。
如果是这样,则为了实现过滤和排序,您必须执行以下操作:
filter
和sort
方法应用于数组arr next()
方法的参数 坦白说,我不理解如何在您的代码中管理click和keyup事件,但这不会影响前面的要点。
假设它从onSearch函数开始绑定到用户操作以触发api调用
filters=new BehaviorSubject({sortby:'',search:''})
onSearch=()=>{
filters.map(obj=>{
// asume you will need to add a object param in getTranches to deal with sortby and search
return this.apiService.getTranches(obj)
}).subscribe();
}
在你的HTML
<div (click)="this.filters.next({sortby:name})"></div>
<input (keyup)="this.filters.next({search:$event.target.value})" type="text">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.