Question

我有一个订阅，它返回一个类型为fruit的对象列表，让我们说：

class Fruit {
  name: string;
  color: string;
}

我的组件中有一个observable，如：

fruitsStream$: Observable<Fruit[]>;
fruitList = Fruit[];

此可观察数据接收数据：

this.fruitsStream$ = this.FruitService.getFruits();
this.fruitsStream$.subscribe(x => this.fruitList = x);

在我看来，我有一组颜色复选框，例如复选框为红色，一个为黄色，一个为绿色。这些复选框与组件中的滤色器双向绑定：

colorFilter: { [color: string]: boolean } = {};

并且当颜色被切换时，它们会被添加或从集合中删除

filterColorSet = new Set<string>()

如何进行* ngFor循环，仅显示检查颜色的水果。如果没有或全部都被选中，则为所有颜色。

类似的东西：

<div *ngFor="let fruit of fruitList" *ng-if="fruitFilter.some(filterColorSet)">

必须有一种更简单的方法来做到这一点..我希望。

提前致谢

编辑1

根据在订阅之前使用fitler的建议，我已将其更改为以下代码。我想我很亲密......但还没有工作。知道什么可能是错的吗？

if (clrs.length === 0) {
    clrs = this.allColors;
}
let clrFilt: Set<string> = new Set(clrs);
this.fStrm$ = this.FruitService.getFruits();
this.fStrm$
    .flatMap(fruits => {
        let filtered = new Array();
        fruits.forEach(fruit => {
            if (fruit.color.some(clr => clrFilt.has(clr))) {
                filtered.push(fruit);
            }
        });
        return Observable.create(function (obs) {
            obs.onNext(filtered);
            obs.onComplete();
        });
    })
    .subscribe(function (elem) {
        this.allfStrm = elem;
    });

如何在订阅上应用过滤器？

提前致谢

0 个答案: