Angular 根据从不同组件（同级）多选中选择的值筛选显示的数据

我有两个部分。一个由多选下拉列表组成。另一个显示通过服务从api获取的数据

我想根据在multi-select上选择的值筛选显示的数据。如何处理这个问题

在这次闪电战中，我复制了这个结构。select components包含multiselect，hello组件显示通过api.service从api获取的数据。在multiselect中选择的值通过另一个过滤器（即filter.service）发送到hello组件。我可以显示所选的值，但我想根据这些值过滤数据

附言：在stackblitz中，我在app.component中明确提到了这两个组件的选择器。但在我的项目中，组件是通过路由器插座提供的。

进入基本原理链接是获得解决此类问题的基本熟悉度的好地方。解释一些组件交互

在您的情况下，您的两个组件可能是调用您的服务的组件的子组件。该包装器可能向显示组件提供从API结果复制的列表（或流），并且可能正在侦听下拉组件的输出。当该输出触发时，包装器可以修改它发送到显示组件的复制列表（或流）

这是一个粗略的例子，但作为免责声明，它是理论性的，我没有运行它

// wrapper html

<multiselect-component (selectionChange)="selectedItems($event)"></multiselect-component>
<display-component [items]="displayItems$ | async"></display-component>


//wrapper ts

private selectedSubject = new BehaviorSubject<any>(); // add your type
set selectedItems(items: any[]) { // add your type
    this.selectedSubject.next(items);
}

displayItems$: Observable<any>; // add your own type

ngOnInit() {
    // the static 'merge' from 'rxjs' to allow both streams to trigger
    this.displayItems$ = merge(
        this.apiService.getData(), // should return an observable
        this.selectedSubject.asObservable(),
    ).pipe(
        // something similar to this
        switchMap((data, filterItems) =>
            data.filter(d =>
                !filterItems.includes(d)
            )
        ),
    );
}

---

在我看来，您基本上是在尝试从中学习。

在我的例子中，显示组件由路由器插座提供服务。所以我尝试使用服务将selectedItems数组从multiselect组件发送到display组件。但我不知道接下来该怎么做。如果我提供stackblitz，你能帮我吗？在这个问题上发表stackblitz不会有什么坏处，我可以给你一个稍微相关的例子，然后我现在添加了代码。请看一看。我使用了

this.changedtectorref.detectChanges（）

以消除

表达式更改TerithasBeenCheckedError

错误。在代码中，

obs

是否会在每次更改multiselect值时更新？我发现实施起来也很困难。如果可能，你能在我的stackblitz？ExpressionChangedTerithasBeenCheckedError-中实现它吗。如果这很难实现，那么我建议您花更多时间通过hero editor学习基础知识并学习rxjs（这是我的建议）。我很乐意提供帮助，但我不知道如果没有代码，我是否可以。@theMayer我现在已经添加了代码！你能看一下吗？

//display component
ngOnInit() {
    // the static 'merge' from 'rxjs' to allow both streams to trigger
    this.obs = merge(
        this.cardsInfo.getCardsInfo(), // should return an observable
        this.filterService.getCategories(),
    ).pipe(
        // something similar to this
        switchMap((data, filterItems) =>
            data.filter(d =>
                !filterItems.includes(d)
            )
        ),
    );
}