提前输入功能即使在清除搜索输入后仍会提供建议

Question

我是新手。我正在使用zomato api构建一个角度应用程序，用户在搜索框中指定位置后即可在其中搜索餐厅。

我试图在不使用任何库的情况下实现预输入。问题在于，即使清除了搜索输入后，我仍然会得到建议。

屏幕截图

这是组件和服务文件。

组件文件

 export class HomeComponent implements OnInit {    
  results ;

  locations =[];

  queryField : FormControl = new FormControl();

  constructor(private zomato : ZomatoService) { }


  ngOnInit() {
    this.queryField.valueChanges.pipe(debounceTime(800),
    distinctUntilChanged(),
    switchMap((query)=>

        this.zomato.getLocations(query)

    )
    ).subscribe(

     response =>{
      this.results = response;
     // console.log(this.results.location_suggestions);
     this.locations = this.results.location_suggestions;
    }    
    );    
  }

服务文件

const headers = new HttpHeaders( ).set("user-key","76b921cfd73b8312cb243fe4185c65cc");

@Injectable({
  providedIn: 'root'
})
export class ZomatoService {

  public baseUrl = "https://developers.zomato.com/api/v2.1/";

  constructor(private http : HttpClient) { }

  getLocations(location){          
      return this.http.get(this.baseUrl + "locations?query=" + location+"&count=10",{headers});    
  }

  getLocation_Details(entityId , entityType){

    return this.http.get(this.baseUrl + "location_details?entity_id=" + entityId + "&entity_type=" + entityType,{headers});

  }    
}