在 mat-selection-list 中实现搜索功能

Question

我一直在四处寻找解决方案，但无法弄清楚我应该怎么做。这是我几乎要寻找的东西的堆栈闪电战，但我不希望它看起来像一个下拉列表。 https://stackblitz.com/edit/angular-yo2o9o?file=app%2Fapp.component.html

我希望有一个像下面我自己的代码一样的列表，但是在列表上实现一个搜索字段并使用它来根据输入过滤用户$（但仍然保存选定的用户）...

编辑：找到这个，https://stackblitz.com/edit/angular-i3pfu2-xgembc?file=app%2Flist-selection-example.ts，

这是它应该的样子，但我无法让它与我的代码一起工作..

Html:

<div class="userContainer">
    <p>Choose participants</p>
    <mat-selection-list class="form-group" #selectedUsers formControlName="users">
      <mat-list-option *ngFor="let user of users$ | async" [value]="user">
        {{ user.name }}
      </mat-list-option>
    </mat-selection-list>
    <p>Invited users: {{ selectedUsers.selectedOptions.selected.length }}</p>
  </div>

users$ 来自我所在州的选择器

this.store$.dispatch(new fromUsers.GetUsers());
this.users$ = this.store$.pipe(select(fromUsers.getRelevantUsers(+this.userId)));

这是我正在使用的表格..

createEventForm() {
 this.eventForm = this.fb.group(
   {
     users: [null],
     more inside...
   }
  );
 }

Answer 1

A "filter search" 不仅是一个 FormControl，您还可以订阅 valueChanges 并使用 switchMap 和 debounce return 列表，嗯，在代码中。如果你有一个值数组和一个 formControl

  search = new FormControl();
  typesOfShoes: string[] = ["Boots","Clogs","Loafers","Moccasins","Sneakers"];

您创建一个可观察对象

$search = this.search.valueChanges.pipe(
    startWith(null),
    debounceTime(200),
    switchMap((res: string) => {
      if (!res) return of(this.typesOfShoes);
      res = res.toLowerCase();
      return of(
        this.typesOfShoes.filter(x => x.toLowerCase().indexOf(res) >= 0)
      );
    })
  );

并使用

<mat-form-field >
    <mat-label>Search</mat-label>
    <input matInput [formControl]="search">
  </mat-form-field>

<mat-selection-list #shoes [formControl]="shoesControl">
  <mat-list-option *ngFor="let shoe of $search|async" [value]="shoe">
    {{shoe}}
  </mat-list-option>
</mat-selection-list>

见stackblitz

已更新 作为查理点，问题是如果我们更改搜索，您会丢失检查的值，因此我们不能使用 [formControl]="shoesControl"

所以，我们将使用mat-list的事件（selectionChange）和mat-option的属性 [selected]来改变FormControl的值

所以，我们将有

<mat-selection-list #shoes 
  (selectionChange)="selectionChange($event.option)" >
  <mat-list-option *ngFor="let shoe of $search|async" 
   [value]="shoe" [selected]="shoesControl.value && 
                shoesControl.value.indexOf(shoe)>=0">
    {{shoe}}
  </mat-list-option>
</mat-selection-list>

看到没有 [formControl]，但请记住，无论是否有输入，FormControl 都存在。好吧，函数 selectionChange 接收到一个带有属性选择和值的对象作为参数，所以我们有

selectionChange(option:any)
{
  let value=this.shoesControl.value || []
  if (option.selected)
    value.push(option.value)
  else
    value=value.filter((x:any)=>x!=option.value)
  this.shoesControl.setValue(value)
}

注意：我更新了 stackblitz

在 mat-selection-list 中实现搜索功能

Implement a search-function in mat-selection-list

angular-material

ngrx

angular