【问题标题】：Display the value of a selected option outside the input field in Chips Autocomplete component在 Chips Autocomplete 组件的输入字段之外显示所选选项的值
【发布时间】：2018-09-04 09:12:01
【问题描述】：

场景：

我正在使用芯片自动完成组件。
从列表中选择特定选项时，它会显示在输入字段中选择选项作为 chip，如下所示图片。

待办事项：

我希望这些芯片显示在输入字段之外，
意味着在任何其他 div 中。如下图
我该怎么做？

这是stackblitz 链接。

【问题讨论】：

标签： css angular angular-material

【解决方案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

【讨论】：

在同一个例子中，我需要搜索过滤器来搜索玩家姓名，这意味着即使我输入第二个名字，它也应该出现。就像在移动联系人列表中一样。
更多答案（其他用户看到，也许他们可以提供帮助）我建议您发布另一个问题

【解决方案2】：

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

您可能想在此之后添加一些填充/边距:)

【讨论】：

对不起我的错误假设，这里有输入类型它是一个自动完成组件。我希望芯片显示在其他 div 中，只有芯片。

【解决方案3】：

使用简单的auto-complete 搜索玩家并在外部div 中显示选定的玩家为chip-list，如下所示

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

【讨论】：

搜索我的名字很好，我如何通过输入第二个名字来调用。
参考这个stackblitz.com/edit/angular-auto-complete?embed=1&file=app/…

【解决方案4】：

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

*ngFor="letfruit of fruits">{{fruit}}

【讨论】：