Angular 10+ 复选框过滤

Question

我正在尝试使用 Angular 实现多个复选框过滤，但似乎无法弄清楚如何准确进行。我在这里查看了多个类似的问题，但未能弄清楚如何使用任何答案。

理想情况下，我想使用事件监听器过滤我的数据。

我主要的两个问题是：

1. 弄清楚如何实际过滤事物，我不知道哪种方法适合我的目标
2. 实际显示更新数据

Stackblitz

我们将不胜感激任何朝着正确方向的推动！

Answer 1

基本上，您需要在两个组件之间共享数据（filters），因为filtered-users 和filters 是您项目中的两个组件。

因此，要在两个components（没有parent-child 关系）之间共享data，我们可以使用observables。

您可以创建一个名为 FilterService 的服务，在其中，您可以拥有一个 observable（过滤器）

@Injectable()
export class FilterService {
     private filters = new Subject<{}>(); // creating a subject

     filters$ = this.filters.asObservable(); // creating an observable

     alertFilter(key: string, value: string) {
         this.filters.next({ key, value }); // publishing the new fliter to the subscribers
     }
}

并将这个service 添加到filtered-users、filters 组件到dependency-injection。并在用户选中过滤器复选框时从filters 组件调用FilterService 的alertFilter() 方法。

在 filter.component.html

<input (change)="onCheck('gender', opt)"

在 filter.component.ts 中

onCheck(key: string, value: string) {
   this.filterService.alertFilter(key, value);
}

在此之后，订阅FilterService 中的observable（过滤器）filtered-users-component。

在过滤用户.component.ts 中

constructor(
  private sortingService: SortingService,
  private userService: UserService,
  private filterService: FilterService
) {
     this.filterService.filters$.subscribe({
        next: filter => {
               this.filteredUsers = this.filteredUsers.filter(user => {
                    return user[filter['key']] === filter['value'];
               });
        }
     });
}

this.filterService.filters$.subscribe() 将在添加新过滤器时执行，因此，使用过滤器变量您可以相应地过滤用户。