Angular 如何在选择“角度”选项后停止valueChange observable？

我正在尝试在我的应用程序中实现简单的自动完成搜索

我的进度：当我使用任何关键字（供应商名称）搜索api请求并以JSON提供所有匹配的供应商名称时。 然后我得到了名称，并试图在输入字段中设置

问题：我在输入字段下方显示列表，因此当我选择名称，然后值再次更改时，请使用所选名称搜索，然后再次重新选择，然后在输入字段中设置值

HTML代码：

<div class="search-container">
    
    <input type="text" class="form-control" placeholder="Search" [formControl]="searchbox">
    
    <div class="search-result" [ngClass]="{'showsearchresult':showsearchdisplay}">

      <div class="list-group" *ngFor="let vendor of Vendors">
        <a href="#" class="list-group-item list-group-item-action" (click)="onsearchselect(vendor.vendor_name)">{{vendor.vendor_name}}</a>
      </div>
      </div>

 </div>                                        

}

我用来隐藏和显示搜索结果标签的变量（showsearchdisplay）。 在subscribe中，重新检查结果是否为空，因为div标记未隐藏

服务类别：

 export class DatasaveService {

  vendornameurl="http://localhost:8080/getvendorbyname/";

  constructor(private http:HttpClient) { }
  
  getVendorByName(val:String):Observable<any>{
    console.log("Value is : "+val);
    return this.http.get<Vendors[]>(this.vendornameurl+val);
   }
}

导出类数据存储服务{
vendornameurl=”http://localhost:8080/getvendorbyname/";
构造函数（私有http:HttpClient）{}
getVendorByName（val:String）：可观察{
console.log（“值为：”+val）；
返回this.http.get（this.vendornameurl+val）；
}
}

我无法发布图像，因为低徽章。 我希望我已经正确地解释了这个问题。 让我知道还需要什么才能得到正确的答案

谢谢你

你可以试试这个

 export class DatasaveService {

  vendornameurl="http://localhost:8080/getvendorbyname/";

  constructor(private http:HttpClient) { }
  
  getVendorByName(val:String):Observable<any>{
    console.log("Value is : "+val);
    return this.http.get<Vendors[]>(this.vendornameurl+val);
   }
}