Angular Typeahead在列表中提供重复值

我尝试了typeahead功能，typeahead建议出现了，但每次都没有清除，并且（它是附加的）在管道中显示重复的建议。请参阅随附的屏幕截图。我试过下面的代码

data: any = [];

getTypeaheadData(){
    const param = (document.getElementById('test1') as HTMLInputElement).value;
    if (typeof param !== "undefined") {     
        this.http.get('/api/sampleAPI',{params: {param: param}}).subscribe((response: any) => {      
        this.data.push(...response);          
      })  
    }
}
  
typeaheadVal = (text$: Observable<string>) =>  
  text$
    .debounceTime(200)
    .distinctUntilChanged()
    .map(term => term.length < 2 ? []
      : this.data.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10));
  

data:any=[]；
getTypeaheadData（）{
常量参数=（document.getElementById（'test1'）作为HTMLInputElement）。值；
if（typeof参数！=“未定义”）{
this.http.get（'/api/sampleAPI'，{params:{param:param}}）.subscribe（（响应：any）=>{
这个.data.push（…响应）；
})  
}
}
typeaheadVal=（文本$：可观察）=>
正文$
.debounceTime（200）
.distinctUntilChanged（）
.map（term=>term.length<2？[]
：this.data.filter（v=>v.toLowerCase（）.indexOf（term.toLowerCase（））>-1.slice（0,10））；

HTML:

每次按下一个键时，您都会将数据按入（追加操作）：

this.data.push(...response)

我认为您应该再看一看文档，去掉（keyup）处理程序，然后执行类似于以下示例的操作，其中switchMap用于取消对服务的“正在运行”请求：

this.data.push(...response)