[英]Angular Observable combinelatest
I'm trying to build a component that access a service and return an observable with a list of objects to populate a table 我正在尝试构建一个组件,该组件可以访问服务并返回带有对象列表的observable来填充表
My service has a function : 我的服务具有以下功能:
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
}
My Component consists of a table displaying the data through: 我的组件包括一个通过以下方式显示数据的表:
this.subscription = this.apiService
.getTranches()
.subscribe(
(data) => {
this.tranches = data;
}
);
html: 的HTML:
<ng-container *ngFor="let tranche of tranches">
// stuff
</ng-container>
Up util here everything works fine. 在这里util一切正常。
I added a input and click events to the table headers 我在表标题中添加了输入并单击事件
//header example for sortby
<div (click)="this.filters.sortby = name"></div>
//input for filter
<input (keyup)="this.filters.search = $event.target.value" type="text">
and a variable filters to store that information 和一个变量过滤器来存储该信息
can you show me how to transform the filter variable in a observable and merge it to a single subscription to feed the table so I can perform the filtering and sorting on the component? 您能告诉我如何在可观察变量中转换过滤器变量并将其合并到单个订阅中以供表格使用,以便我可以对组件执行过滤和排序吗?
I've tried using filter as behaviourSubject and use combineLatest to merge them unsuccessfully if that is the way to do it can I see an example? 我尝试使用filter作为behaviourSubject并使用CombineLatest未能成功合并它们,如果这样做的话,我可以看到一个示例吗?
If I understand correctly, you have a class variable _tranches which is a BehaviorSubject and emits, via the next()
method, an array arr of items that get displayed by the table. 如果我理解正确,则您有一个类变量_tranches ,它是BehaviorSubject,并通过
next()
方法发出由表显示的项的数组arr 。
If this is true, in order to achieve filtering and sorting, you have to do the following things: 如果是这样,则为了实现过滤和排序,您必须执行以下操作:
filter
and sort
methods to the array arr filter
和sort
方法应用于数组arr next()
method of the BehaviorSubject next()
方法的参数 Then honestly I do not understand how the click and keyup events are managed in your code, but this does not affect the previous points. 坦白说,我不理解如何在您的代码中管理click和keyup事件,但这不会影响前面的要点。
assume it start off from a onSearch function bind to a user action to trigger api call 假设它从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();
}
in your html 在你的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.