当应用搜索(滤波器)时，Angular Material 2 Multi Select不会保留所选值

Question

我使用的是Angular材料2多选择的Angular 5。我已经在其中添加了一个搜索过滤器，但是当用户搜索特定项目并选择这些过滤器时，它会删除之前选择的项目。

我想保留所有选定的项目，除非和直到用户取消选择。

eg：我有一个区域列表，如果用户选择非洲和亚洲，则搜索和选择欧洲，因此我们只将欧洲视为选择。

filterRegion.html

<mat-select [compareWith]="compareFn"  placeholder="REGION" [formControl]="region" multiple>
        <mat-select-trigger>
            {{region.value ? region.value[0]?.value : ''}}
            <span *ngIf="region.value?.length > 1" >
              (+{{region.value.length - 1}})
            </span>
          </mat-select-trigger>
        <mat-form-field class="searchBox">
            <input matInput placeholder="Search" [(ngModel)]="searchRegion" >
        </mat-form-field>
      <mat-option *ngFor="let r of regionList | filterSearch: searchRegion" [value]="r">{{r.value}}</mat-option>
    </mat-select>

filter-search-pipe.ts

    import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'filterSearch'
})
export class FilterSearchPipe implements PipeTransform {
  transform(value: any, input: string): any {
    if (input) {
      input = input.toLowerCase();
      return value.filter(function (el: Object) {
          return el['value'].toLowerCase().indexOf(input) > -1;
      })
    }
  return value;
  }
  }

我尝试使用以下：https：//github.com/albyrock87/material2/blob/5c196ad65d1bd51bd51bd58cb02a6bd78407ee2ef5be5be198/src/src/src/demo-app/demo-app/select/select-demect/select-demo.htm.htm.html

但是我遇到了MAT-SELECT-HEADER和MAT-SELECT-SERACH的错误。

Answer 1

对于此问题，我建议您使用Angular-Material的自动完成模块。

<mat-form-field>
   <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
</mat-form-field>
<mat-autocomplete #auto="matAutocomplete">
   <mat-option *ngFor="let option of options" [value]="option">
      {{ option }}
   </mat-option>
</mat-autocomplete>

然后，用于多选择的

必须使用芯片容器（材料模块）

<mat-form-field class="demo-chip-list">
  <mat-chip-list #chipList>
    <mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
             [removable]="removable" (remove)="remove(fruit)">
      {{fruit.name}}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
    <input placeholder="New fruit..."
           [matChipInputFor]="chipList"
           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
           [matChipInputAddOnBlur]="addOnBlur"
           (matChipInputTokenEnd)="add($event)" />
  </mat-chip-list>
</mat-form-field>

和组件的TS文件中。地点：

import {Component} from '@angular/core';
import {MatChipInputEvent} from '@angular/material';
import {ENTER, COMMA} from '@angular/cdk/keycodes';
/**
 * @title Chips with input
 */
@Component({
  selector: 'chips-input-example',
  templateUrl: 'chips-input-example.html',
  styleUrls: ['chips-input-example.css']
})
export class ChipsInputExample {
  visible: boolean = true;
  selectable: boolean = true;
  removable: boolean = true;
  addOnBlur: boolean = true;
  // Enter, comma
  separatorKeysCodes = [ENTER, COMMA];
  fruits = [
    { name: 'Lemon' },
    { name: 'Lime' },
    { name: 'Apple' },
  ];

  add(event: MatChipInputEvent): void {
    let input = event.input;
    let value = event.value;
    // Add our fruit
    if ((value || '').trim()) {
      this.fruits.push({ name: value.trim() });
    }
    // Reset the input value
    if (input) {
      input.value = '';
    }
  }
  remove(fruit: any): void {
    let index = this.fruits.indexOf(fruit);
    if (index >= 0) {
      this.fruits.splice(index, 1);
    }
  }
}

因此，您必须合并自动完成和芯片容器。它变成了非常好的UX。

Answer 2

我处理同一问题的一种方式只是隐藏元素

mat-option [ngClass]="{hidden: isRegionFilteredOut(region)}"
.hidden {
  display:none
}