Question

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

我希望保留所有选定的项目，除非并且直到用户取消选择它们。

例如：我有一个地区列表，如果用户选择非洲和亚洲然后搜索并选择欧洲，那么我们只看到欧洲被选中。

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>

过滤器搜索-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/5c196ad65d1bd5d8cb02a6bd78407ee2ef5be198/src/demo-app/select/select-demo.html

但我收到了mat-select-header和mat-select-search的错误。

Answer 1

对于这个问题，我建议你使用角度材料的autoComplete模块。

<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>

然后对于multiSelecting必须使用芯片容器（材料模块）

<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);
    }
  }
}

因此，您必须合并autoComplete和芯片容器。它成为一个非常好的用户体验。

Answer 2

我处理相同问题的一种方法是仅从DOM中隐藏元素

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

.hidden {
  display:none
}

应用搜索（过滤器）时，Angular Material 2多选不保留所选值

2 个答案: