即使在 angular 5 中选择了 taginput 中的选项后，如何清除保留在文本框中的键入值
How to clear the typed value which retains in the textbox even after selecting the option in taginput in angular 5
我正在使用 angular material 将 chips 组件与自动完成组件组合在一起，以将 tagInput 组件作为可重用组件。这里一切正常，但即使在选择值并将其转换为芯片之后，我们在自动完成选项列表中选择之前键入的任何值都会显示。这仅发生在鼠标单击时。使用 Keyup.enter 选择时，无论我们输入什么，它都不会显示输入，即使在选择之后也是如此。但是对于使用鼠标点击的选择，它并没有清除我想从组件端控制它（sq-taglist.ts）。这里是stackblitzLink。我也尝试使用组件中的 setValue 和 patchValue 方法，但没有 work.Please 帮助我提前解决这个 issue.Thanks。
那是因为你可能做错了事。
这里 stackblitz 向您展示了它的工作原理。
我所做的很简单：我将输入添加到 selected 函数：
selected(event: MatAutocompleteSelectedEvent, input: HTMLInputElement) {
<input placeholder="New fruit..." #fruitInput ...
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event, fruitInput)">
并且在 selected 函数的末尾：
input.value = '';
我正在使用 angular material 将 chips 组件与自动完成组件组合在一起，以将 tagInput 组件作为可重用组件。这里一切正常，但即使在选择值并将其转换为芯片之后，我们在自动完成选项列表中选择之前键入的任何值都会显示。这仅发生在鼠标单击时。使用 Keyup.enter 选择时，无论我们输入什么，它都不会显示输入，即使在选择之后也是如此。但是对于使用鼠标点击的选择，它并没有清除我想从组件端控制它（sq-taglist.ts）。这里是stackblitzLink。我也尝试使用组件中的 setValue 和 patchValue 方法，但没有 work.Please 帮助我提前解决这个 issue.Thanks。
那是因为你可能做错了事。
这里 stackblitz 向您展示了它的工作原理。
我所做的很简单：我将输入添加到 selected 函数：
selected(event: MatAutocompleteSelectedEvent, input: HTMLInputElement) {
<input placeholder="New fruit..." #fruitInput ...
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event, fruitInput)">
并且在 selected 函数的末尾：
input.value = '';