web-dev-qa-db-fra.com

Comment sauvegarder un objet sélectionné en utilisant mat-chip et autocomplete en matériau angulaire 2

J'utilise Angular 6 avec le matériel Angular. J'essaie de sauvegarder un objet sélectionné ou une liste d'objets sélectionnés de mat-chip et de la saisie semi-automatique. Je suis capable d'envoyer une valeur de chaîne au tableau fruits [], mais je ne peux pas envoyer l'objet sélectionné au tableau fruits []. S'il vous plaît aidez-moi à trouver une solution. Merci.

Mon projet de démonstration Lien: code de démonstration sur stackblitz

angular-materialangular6md-chipangular-material-6mat-autocomplete
3
monir tuhin

Je peux essayer avec cette solution.

J'ai créer une démo sur Stackblitz .

composant.html

<mat-form-field class="example-chip-list">
    <mat-chip-list #chipList>
        <mat-chip *ngFor="let fruit of fruits;let indx=index;" [selectable]="selectable" [removable]="removable" (removed)="remove(fruit,indx)">
            {{fruit.name}}
            <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.name}}
        </mat-option>
    </mat-autocomplete>
</mat-form-field>


<pre>{{fruits|json}}</pre>

composant.ts

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 Basic chips
 */
@Component({
  selector: 'chips-overview-example',
  templateUrl: 'chips-overview-example.html',
  styleUrls: ['chips-overview-example.css'],
})
export class ChipsOverviewExample {
  visible = true;
  selectable = true;
  removable = true;
  addOnBlur = false;
  separatorKeysCodes: number[] = [ENTER, COMMA];
  fruitCtrl = new FormControl();
  filteredFruits: Observable<string[]>;
  fruits: any = [];
  allFruits: any = [
    {
      id: 1,
      name: 'Apple'
    },
    {
      id: 2,
      name: 'Orange'
    },
    {
      id: 3,
      name: 'Banana'
    },
    {
      id: 4,
      name: 'Malta'
    }
  ];

  @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({
          id:Math.random(),
          name:value.trim()
      });
    }

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

    this.fruitCtrl.setValue(null);
  }

  remove(fruit, indx): void {
    this.fruits.splice(indx, 1);
  }

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

  private _filter(value: any): string[] {
    return this.allFruits.filter(fruit => fruit.id === value.id);
  }
}
8
Krishna Rathore

J'ai développé une application qui utilise la saisie semi-automatique pour sélectionner des objets dans une liste. En utilisant une approche similaire à celle de Krishna Rathore, j'ai découvert que l'événement valueChanges de FormControl ne renvoyait pas de manière fiable une chaîne (parfois, j'ai plutôt un objet). Ma solution a été d'ajouter un observable <String []> et de l'utiliser pour le mat-autocomplete. J'ai également ajouté une propriété appelée allowFreeTextAddEngineer pour gérer les cas où votre application peut autoriser des entrées autres que celles de la liste de saisie semi-automatique. Il y a un Démo ici .

0
Mick Buckley