角材2マルチセレクトで検索（フィルタ）を適用したときに選択した値が保持されない

Question

角度のある材質2を使用しています。マルチ選択で角度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

をしかし、私はのマットのためのエラーを取得しました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とチップコンテナをマージする必要があります。非常に良いUXになります。