角度可觀察的組合

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>

在這里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未能成功合並它們，如果這樣做的話，我可以看到一個示例嗎？

Answer 1

如果我理解正確，則您有一個類變量_tranches ，它是BehaviorSubject，並通過next()方法發出由表顯示的項的數組arr 。

如果是這樣，則為了實現過濾和排序，您必須執行以下操作：

• 將數組arr存儲在某個位置（例如，作為私有類變量）
• 從UI觸發sort或filter命令時，將filter和sort方法應用於數組arr
• 獲取這些方法的結果並將其用作BehaviorSubject的next()方法的參數

坦白說，我不理解如何在您的代碼中管理click和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">