Отображение значения выбранного параметра за пределами поля ввода в компоненте «Автозаполнение чипов»

Question

Сценарий:

• Я использую Chips Autocomplete компонент.

• При выборе конкретной опции из списка она отображает выбранный параметр в качестве чипа во входном файле, как показано ниже изображение.

  

Todo:

• Я хочу, чтобы эти микросхемы отображались за пределами поля ввода,
  означает в любом другом div.Как ниже изображение
  Как я могу это сделать?
  
  Вот ссылка stackblitz .

Answer 1

Используйте простой auto-complete для поиска игроков и отображайте выбранных игроков как chip-list внутри внешнего div, как показано ниже

<mat-form-field class="example-chip-list">    
    <input matInput placeholder="New fruit..." #fruitInput [formControl]="fruitCtrl" [matAutocomplete]="auto">
    <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>

<div class="otherDiv">
    <mat-chip-list>
        <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>
    </mat-chip-list>
</div>

Answer 2

Перемещение <mat-chip> из <mat-form-field></mat-form-field>

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

  </div>

Смотрите здесь: https://stackblitz.com/edit/angular-h8zdkh-ao3bzb?file=app/chips-autocomplete-example.html

Answer 3

Это очень просто. так как вы уже используете массив фруктов для добавления или удаления элементов, таким образом, вы можете получить доступ к массиву фруктов в любом месте html-файла этого компонента

* ngFor = "давай фрукты из фруктов"> {{fruit}}

Answer 4

Просто переместите поле input за пределы (сверху или снизу) поля </mat-chip-list>, и все будет в порядке.

Возможно, после этого вы захотите добавить отступы / отступы:)