angular - 即使在角度 5 中的 taginput 中选择选项后，如何清除保留在文本框中的键入值

Question

我正在使用有角度的材料将芯片组件与自动完成组件的组合包装起来，以将 tagInput 组件作为可重用组件。这里一切正常，但是我们在自动完成选项列表中选择之前输入的任何值都会显示，即使在该值被选择并转换为芯片之后也是如此。这仅发生在鼠标单击时。使用 Keyup.enter 进行选择，它不会显示我们输入的任何内容，即使在选择之后也是如此。但是对于使用鼠标单击进行的选择，它并没有清除我想从组件端控制它（sq-taglist.ts）。这是stackblitzLink。我也尝试使用组件中的 setValue 和 patchValue 方法，但没有成功。请帮我解决这个问题。提前致谢。

Answer 1

那是因为你可能在做错事。

这是一个stackblitz向您展示它的工作原理。

我所做的很简单：我将输入添加到selected函数中：

selected(event: MatAutocompleteSelectedEvent, input: HTMLInputElement) {

<input placeholder="New fruit..." #fruitInput ...
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event, fruitInput)">

在selected函数的最后：

input.value = '';