it-swarm.com.de

Gibt es eine Möglichkeit, eine Mehrfachauswahl in Autocomplete (Angular 4) vorzunehmen?

Ich möchte eine Mehrfachauswahl für gefilterte Elemente durch die automatische Vervollständigung treffen Inspiriert von dem folgenden Tutorial Ich habe diesen Code ausprobiert:

Die Komponente : 

 <form class="example-form">
  <mat-form-field class="example-full-width">
    <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of filteredOptions | async" [value]="option" multiple>
      <mat-checkbox>
        {{ option }}
     </mat-checkbox> 
     </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

Ich habe ein Tag hinzugefügt, um die Auswahl zu aktivieren, aber es funktioniert nicht. Sobald ich eine Option gefiltert und ausgewählt habe, wird das Menü geschlossen und das Kontrollkästchen wird nicht einmal aktiviert. Gibt es eine Möglichkeit, eine Mehrfachauswahl in Autocomplete vorzunehmen? Vielen Dank !!

7
nour

Angular Materialdokumentation für Chips enthält ein schönes Beispiel, wie Sie mit einer automatischen Mehrfachauswahl beginnen können:

<mat-form-field class="example-chip-list">
  <mat-chip-list #chipList>
    <mat-chip
      *ngFor="let fruit of fruits"
      [selectable]="selectable"
      [removable]="removable"
      (removed)="remove(fruit)">
      {{fruit}}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
    <input
      placeholder="New fruit..."
      #fruitInput
      [formControl]="fruitCtrl"
      [matAutocomplete]="auto"
      [matChipInputFor]="chipList"
      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
      [matChipInputAddOnBlur]="addOnBlur"
      (matChipInputTokenEnd)="add($event)">
  </mat-chip-list>
  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
    <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
      {{fruit}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

Grundsätzlich besteht eine Chipliste, die an eine Liste gebunden ist, und eine Texteingabe, die die Suche innerhalb einer Autovervollständigungsliste ermöglicht. 

import {COMMA, ENTER} from '@angular/cdk/keycodes';
import {Component, ElementRef, ViewChild} from '@angular/core';
import {FormControl} from '@angular/forms';
import {MatAutocompleteSelectedEvent, MatChipInputEvent} from '@angular/material';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';

/**
 * @title Chips Autocomplete
 */
@Component({
  selector: 'chips-autocomplete-example',
  templateUrl: 'chips-autocomplete-example.html',
  styleUrls: ['chips-autocomplete-example.css'],
})
export class ChipsAutocompleteExample {
  visible = true;
  selectable = true;
  removable = true;
  addOnBlur = false;
  separatorKeysCodes: number[] = [ENTER, COMMA];
  fruitCtrl = new FormControl();
  filteredFruits: Observable<string[]>;
  fruits: string[] = ['Lemon'];
  allFruits: string[] = ['Apple', 'Lemon', 'Lime', 'Orange', 'Strawberry'];

  @ViewChild('fruitInput') fruitInput: ElementRef;

  constructor() {
    this.filteredFruits = this.fruitCtrl.valueChanges.pipe(
        startWith(null),
        map((fruit: string | null) => fruit ? this._filter(fruit) : this.allFruits.slice()));
  }

  add(event: MatChipInputEvent): void {
    const input = event.input;
    const value = event.value;

    // Add our fruit
    if ((value || '').trim()) {
      this.fruits.Push(value.trim());
    }

    // Reset the input value
    if (input) {
      input.value = '';
    }

    this.fruitCtrl.setValue(null);
  }

  remove(fruit: string): void {
    const index = this.fruits.indexOf(fruit);

    if (index >= 0) {
      this.fruits.splice(index, 1);
    }
  }

  selected(event: MatAutocompleteSelectedEvent): void {
    this.fruits.Push(event.option.viewValue);
    this.fruitInput.nativeElement.value = '';
    this.fruitCtrl.setValue(null);
  }

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();

    return this.allFruits.filter(fruit => fruit.toLowerCase().indexOf(filterValue) === 0);
  }
}

Der Code ist ziemlich einfach (Filterung basierend auf Texteingabe nach jedem eingegebenen Zeichen, ein Element aus der Liste entfernen usw.). Natürlich sollte dies an Ihre Bedürfnisse angepasst werden (z. B. wenn Sie ein Element ausgewählt haben, sollte es für die nächsten Ergebnisse der automatischen Vervollständigung herausgefiltert werden). 

12
Alexei

Ng2-select, probieren Sie es mit mehreren, https://valor-software.com/ng2-select/ , lassen Sie mich wissen, ob Sie das wollen. 

Im Allgemeinen gibt es keinen guten Standard für die Mehrfachauswahl. 

0
windmaomao