angular - 即使在清除搜索输入后，预输入功能也会提供建议

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});

  }    
}

标签： angular