如何运行最新的on按钮触发器

Question

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;
})
);

我有这个组合最新的多个过滤通过复选框，如果值被选中，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$);
}

现在我有一个应用按钮，我想检查复选框，通过点击应用按钮，只有我想运行最新的组合。

Answer 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);
}
}

Answer 2

假设你想延迟combineLatest的触发，直到apply按钮被点击

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

<button #btn>Apply</button>

//在组件中创建元素

@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()),
);

由于现在组合最新是依赖于应用按钮点击，它将永远不会触发，直到应用按钮被点击。