在“芯片自动完成"组件的输入字段之外显示所选选项的值 [英] Display the value of a selected option outside the input field in Chips Autocomplete component

问题描述

场景:

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

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

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

• 我希望这些筹码显示在输入字段之外，
  是指任何其他div.就像下面的图像
  我该怎么做?
  
  这是 stackblitz 链接.

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

推荐答案

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

这篇关于在“芯片自动完成"组件的输入字段之外显示所选选项的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！