无法重置提前输入组件的输入值

Question

对于预输入组件，结果列表出现后似乎无法清除输入值。如果结果列表未出现，则可以从按钮中清除模型而没有问题。

复制步骤：

1. 打开https://stackblitz.com/edit/angular-rybwwn-w3w4ca
2. 引入文本“ aaa”
3. 单击“清除”按钮
4. 输入已清除
5. 引入文本“ ala”。结果列表出现。
6. 单击“清除”按钮
7. 输入未清除

还有另一种清除输入值的方法吗？

Answer 1

修复1：使用setTimeout

clear(){
   setTimeout(()=>{
       this.model = '';
     });
  }

修复2：使用本地元素

您可以利用ElementRef和ViewChild获取search input的引用，并通过其本机引用清除文本值。

您对clear方法的修改版本是-

import {Component, ElementRef, ViewChild} from '@angular/core';

clear(){
    this.model = '';
    console.log(this.searchInput.nativeElement);
    setTimeout(()=>{
       this.searchInput.nativeElement.value = "";
    }) 
  }

工作副本在这里-https://stackblitz.com/edit/angular-rybwwn-hxpcyv