在“芯片自动完成”组件的输入字段之外显示所选选项的值

Question

场景：

• 我正在使用芯片自动完成组件。

• 从列表中选择特定选项时，它将显示 在输入文件中选择了一个选项作为 chip ，如下所示 图片。

  

Todo：

• 我希望这些筹码显示在输入字段的外部，
  表示在其他任何div中，就像下面的图像一样
  我该怎么做？
  
  这是stackblitz链接。

Answer 1

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

只需将input字段移到</mat-chip-list>的外部（顶部或底部），就可以了。

您可能要在此之后添加一些填充/边距：）

Answer 3

这很简单。 因为您已经在使用Fruits数组添加或删除项目，  因此，您可以在该组件的html文件中的任意位置访问水果数组

* ngFor =“让水果为水果”> {{fruit}}

Answer 4

使用简单的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>