Angular Reactive Forms - 带有文本搜索和切换的过滤列表

Question

我有以下设置。搜索输入框效果很好。我现在已经添加了切换开关，我正在尝试了解如何使两者一起工作。

我已经为搜索词创建了一个 BehaviourSubject 和 Observable 组合，然后我正在观察 observable 以触发对象的过滤。

searchString = new BehaviorSubject("");
searchString$ = this.searchString.asObservable();   


this.myForm.controls.searchString.valueChanges.pipe(
  debounceTime(400),
  distinctUntilChanged(),
  tap((val) => this.searchString.next(val))
).subscribe()


this.searchString$.subscribe((searchTerm) => {
  console.log(this.userNames);
  if (this.userNames !== undefined) {
    this.filteredUserNames = this.userNames.filter(
      (userName) =>
        userName.searchTerms
          .toLowerCase()
          .indexOf(searchTerm.toLowerCase()) !== -1
    );
  };

这很好用。现在，我使用 formcontrolname 和 Valuechanges observable 设置了切换

this.myForm.controls.isActive.valueChanges.pipe(
  tap( val => this.userIsActive = val)
).subscribe()

这会切换 userIsActive。在filteredUserNames 我有一个属性isActive: boolean

同时按 searchTerm 和 isActive 状态过滤过滤后的UserNames 对象的最佳方法是什么？

编辑： 用户对象如下所示

{id: 52, firstName: "Administrator", lastName: "Account", employeeId: null, jobTitle: "Learning Administrator", isActive: false …}

filteredUserNames 列表用作模板中的 *ngFor。

<div (click)="selectUser(userName)" 
    *ngFor="let userName of filteredUserNames">
     {{userName.title}}
     etc...
</div

我需要同时使用过滤器 isActive 和 SearchTerm 来过滤列表。因此，如果将非活动切换为 false，则搜索框将仅搜索非活动列表，如果将其切换为 true，则搜索框将搜索整个原始列表。

Answer 1

也许你可以简化一下：

const searchTerm = val.searchString.toLowerCase();

const list = val.isActive ? this.userNames : this.userNames.filter(user => 
     user.isDeleted === false
);

this.filteredUserNames = list.filter((userName) => 
    userName.searchTerms.toLowerCase().includes(searchTerm)
);

Answer 2

在@Dima S 的回答的帮助下，我使用了完整的表单组值更改，然后根据列表是活动还是非活动创建了替代搜索。

this.myForm.valueChanges.pipe(
  debounceTime(400),
  distinctUntilChanged(),
  tap( val => 
    {
      if (val.isActive == false) {
        let searchTerm = val.searchString;
        let isInactiveList = this.userNames.filter(user => user.isDeleted == false)
        this.filteredUserNames = isInactiveList.filter((userName) =>
        userName.searchTerms
          .toLowerCase()
          .indexOf(searchTerm.toLowerCase()) !== -1)
      } 
      else if (val.isActive == true) {
        let searchTerm = val.searchString;
        this.filteredUserNames = this.userNames.filter((userName) =>
        userName.searchTerms
          .toLowerCase()
          .indexOf(searchTerm.toLowerCase()) !== -1);
      }
    })
).subscribe()

Answer 3

假设您有一个端点，FormGroup 将返回其完整值

destroy$ = new Subject<any>();

ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
}

ngOnInit() {
    this.myForm.valueChanges
        .pipe(
            // To clear valueChanges
            takeUntil(this.destroy$),
            debounceTime(400),
            distinctUntilChanged(),
            // This will take a val and switch to an endpoint of a choice
            switchMap((val) => this.onSearch(val))
        ).subscribe(res => { });
}

private onSearch() {
    return {{ endPoint }}
};

如果是本地搜索，则将 switchMap 返回到 tap 并使用表单值的对象进行一些本地过滤