Display the value of a selected option outside the

问题:

Scenario :

• I am using Chips Autocomplete component.

• On selecting the particular option from the list it is displaying the selected option as the chip in the input filed as shown in below image.

  

Todo :

• I want these chips to be displayed outside the input field,
  means in any other div.Like below image
  How can i do this ?
  
  Here is the stackblitz link.

回答1:

Move <mat-chip> out of <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>

See here:https://stackblitz.com/edit/angular-h8zdkh-ao3bzb?file=app/chips-autocomplete-example.html

回答2:

Just move the input field outside (top or bottom) of the </mat-chip-list> and you should be fine.

You might want to add some padding/margin after that :)

回答3:

Use simple auto-complete to search players and display the selected players as chip-list inside the outer div as like below

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

回答4:

It is very simple. as you are already using fruits array to add or remove the items, thus you can access fruits array any where in your html file of that component

<h1> *ngFor="let fruit of fruits">{{fruit}} </h1>