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

Question

场景：

• 我正在使用Chips Autocomplete组件。
• 在从列表中选择特定选项时，它将所选选项显示为输入字段中的芯片，如下图所示。

所有：

• 我希望这些芯片显示在输入字段之外， 在任何其他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

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

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

<h1> * ngFor =“让水果结果”> {{fruit}} </ h1>