如何在按钮触发器上运行 combinelate答案

【问题标题】：How to run the combinelatest on button trigger如何在按钮触发器上运行 combinelate
【发布时间】：2021-09-29 14:32:47
【问题描述】：

 this.filteredProduct$ = combineLatest([
      this.productDataList$,
      this.productFilterApplied$,
      this.collectionFilterApplied$,
      this.statusFilterApplied$,
      this.unitPriceFilterApplied$,
      this.markUpFilterApplied$
    ]).pipe(
      map(([products, producttype, collection, status, unitPrice, markup]: any) => {
        if (producttype && producttype.length) {
          products = products.filter((product: any) => producttype.includes(product.productType));
        }

        if (collection && collection.length) {
          products = products.filter((product: any) => collection.includes(product.collections));
        }

        if (status && status.length) {
          products = products.filter((product: any) => status.includes(product.downstreamStatus));
        }

        if (unitPrice && unitPrice.length) {
          console.log(unitPrice);
          if (unitPrice == "0-100") {
            products = products.filter((item: any) => Math.round(item?.unitPriceWithShippingFee) >= 0 && Math.round(item?.unitPriceWithShippingFee) <= 100)
          } else if (unitPrice == "100-500") {
            products = products.filter((item: any) => Math.round(item?.unitPriceWithShippingFee) >= 100 && Math.round(item?.unitPriceWithShippingFee) <= 500)
          } else if (unitPrice == "500-1000") {
            products = products.filter((item: any) => Math.round(item?.unitPriceWithShippingFee) >= 500 && Math.round(item?.unitPriceWithShippingFee) <= 1000)
          } else if (unitPrice == "1000 and above") {
            products = products.filter((item: any) => Math.round(item?.unitPriceWithShippingFee) >= 1000)
          } else if (unitPrice == 'clear') {
            products = products;
          }
        }

        if (markup && markup.length) {
          console.log(markup);
          if (markup == "0-25 (%)") {
            products = products.filter((item: any) => Math.round(item?.markup) >= 0 && Math.round(item?.markup) <= 25)
          } else if (markup == "25-50 (%)") {
            products = products.filter((item: any) => Math.round(item?.markup) >= 25 && Math.round(item?.markup) <= 50)
          } else if (markup == "50-75 (%)") {
            products = products.filter((item: any) => Math.round(item?.markup) >= 50 && Math.round(item?.markup) <= 75)
          } else if (markup == "75-100 (%)") {
            products = products.filter((item: any) => Math.round(item?.markup) >= 75 && Math.round(item?.markup) <= 100)
          } else if (markup == 'clear') {
            products = products;
          }
        }

        return products;
      })
    );

我正在通过复选框使用此 combinelatest 进行多重过滤，如果选中该值，则 filterValue 将传递给 productfilterapplied$.next 并且 combinelatest 正常工作

public productChanged(filterValue: any) {
      if (filterValue.name != undefined) {
        console.log('produtype  type', this.productFilterApplied$);
        const currentFilters = this.productFilterApplied$.getValue();
        const idx = currentFilters.indexOf(filterValue.name);
        if (idx >= 0) {
          currentFilters.splice(idx, 1)
        } else {
          currentFilters.push(filterValue.name)
        }

        this.productFilterApplied$.next(currentFilters)
        console.log('produtype  type', this.productFilterApplied$);
      }

现在我有一个应用按钮，我想选中复选框，然后单击应用按钮，我只想运行最新的组合。

【问题讨论】：

标签： angular rxjs combinelatest

【解决方案1】：

一种可能的解决方案

import { Component } from "@angular/core";

import { mergeMap, exhaustMap } from "rxjs/operators";
import { HttpClient } from "@angular/common/http";
import { BehaviorSubject } from "rxjs";

@Component({
  selector: "my-app",
  template: `
    <button (click)="onSubmit()">submit</button>
  `,
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  submit$ = new BehaviorSubject(null);
  constructor(private http: HttpClient) {}
  ngOnInit() {
    combineLatest([ // COMBINELATEST LOGIC HERE
this.submit$.pipe(filter(i => i)), // filter falsy values
....
])

  }
  onSubmit() {
    this.submit$.next(true);
  }
}

【讨论】：

对您有帮助吗？

【解决方案2】：

假设你想延迟combineLatest Observable 触发，直到应用按钮被点击

// 在模板中创建应用按钮

<button #btn>Apply</button>

//在组件中创建elementRef

@ViewChild('btn', { static: true }) button: ElementRef;

// 用它创建 Observable

  const applyBtn$ =  fromEvent(this.button.nativeElement, 'click');

// 将 combineLatest 包装在一个方法中并返回它，而不是像分配给this.filteredProduct$ 一样

funWithCombineLatest(): Observable<any>{
    return combineLatest([
      ...other obervable
    ]);
}

使用switchMap 和applyBtn$ 并将结果分配给this.filteredProduct$

this.filteredProduct$ = applyBtn$.pipe(
    switchMap(_ => functionWithCombineLatest()),
);

由于 now combine latest 依赖于应用按钮的点击，它永远不会触发，直到应用按钮被点击。

【讨论】：