在 Chips Autocomplete 组件的输入字段外显示所选选项的值 [英] Display the value of a selected option outside the input field in Chips Autocomplete component

问题描述

场景:

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

• 从列表中选择特定选项后，它会显示选择选项作为输入字段中的芯片，如下所示图像.

待办事项:

• 我希望这些筹码显示在输入字段之外，
  意味着在任何其他 div 中.如下图
  我该怎么做?
  
  这是 stackblitz 链接.

解决方案

将移出

 
<垫芯片*ngFor="让水果的果实"[可选]="可选"[可移动]="可移动"(已移除)="移除(水果)">{{水果}}<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon></mat-chip>

参见此处:https://stackblitz.com/edit/angular-h8zdkh-ao3bzb?file=app/chips-autocomplete-example.html

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.

解决方案

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

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