Question

我正在查看 OOTB 垫芯片示例

https://stackblitz.com/edit/angular-yeehxp?file=src/app/chips-autocomplete-example.html

目标：能够进行多项选择

问题：在stackblitz中，单击/选择任何水果，然后在光标处尝试选择另一个。它没有显示可用水果列表

我不得不失去焦点然后回来，然后它再次显示项目列表。这会使用户感到困惑，因此不需要

有没有办法避免点击其他地方只是为了选择另一个项目/筹码？

Answer 1

Angular 有针对此用例的指令。该指令称为 matAutocompleteTrigger。您可以使用另一个引用调用此指令。使用该引用，您可以调用名为 openPanel() 的方法。在下面的示例中，我在您的输入中添加了两行。这应该会给你你想要的结果。

<input
  placeholder="New fruit..."
  #fruitInput
  #trigger="matAutocompleteTrigger"
  [formControl]="fruitCtrl"
  [matAutocomplete]="auto"
  [matChipInputAddOnBlur]="true"
  [matChipInputFor]="chipList"
  [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
  (matChipInputTokenEnd)="add($event)"
  (click)="trigger.openPanel()">

角材料芯片多选问题

1 个答案: