Question

我正在尝试构建一个访问服务的组件，并返回一个带有对象列表的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>

在这里使用一切工作正常。

我在表格标题中添加了输入和点击事件

//header example for sortby
<div (click)="this.filters.sortby = name"></div>

//input for filter
<input (keyup)="this.filters.search = $event.target.value" type="text">

以及用于存储该信息的变量过滤器

您能告诉我如何在observable中转换过滤器变量并将其合并到单个订阅中以提供表格，以便我可以对组件执行过滤和排序吗？

我尝试过使用filter作为behaviourSubject并使用combineLatest合并它们失败，如果是这样的话，我能看到一个例子吗？

Answer 1

如果我理解正确，你有一个类变量 _tranches ，它是一个 BehaviorSubject ，并通过next()方法发出一个数组 arr 表格显示的项目。

如果是这样，为了实现过滤和排序，您必须执行以下操作：

将数组 arr 存储在某处（例如，作为私有类变量）
从用户界面触发排序或过滤器命令时，请应用filter和数组的sort方法 arr
获取这些方法的结果并将其用作 BehaviorSubject

next()

老实说，我不明白如何在您的代码中管理点击和 keyup 事件，但这不会影响之前的几点。

Answer 2

假设它从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">

Angular Observable combinelatest

2 个答案: