Angular Material Chips 显示在输入框下方

Question

我正在使用 Angular Material 创建在输入字段中输入的筹码。因此，文档 examples 中给出的当前默认行为是在输入框中显示筹码。我不想在我的输入字段中显示这些芯片，我想做的是当用户输入任何内容时，应该在输入字段下(而不是在输入字段内)创建芯片。您可以通过任何示例链接帮助我。

Answer 1

如果您查看 Angular Material Chip 示例，您可以从 mat-form-field 中提取输入

更新: 如果您对 example from the docs 中的输入元素重新排序，则芯片会出现在输入下方(用户输入文本的位置)，但仍然是组件的一部分:

<mat-form-field class="example-chip-list">
  <input placeholder="New fruit..."
        [matChipInputFor]="chipList"
        [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
        [matChipInputAddOnBlur]="addOnBlur"
        (matChipInputTokenEnd)="add($event)">

  <mat-chip-list #chipList>
    <mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
            [removable]="removable" (removed)="remove(fruit)">
      {{fruit.name}}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
  </mat-chip-list>
</mat-form-field>

这可能无法让您完全达到您的设想，但我认为它符合您正在寻找的解决方案的精神。

请参阅我从示例中调整的 StackBlitz。