angular - primeng自动完成ajax不显示建议

Question

我有这样的看法：

<div class="p-grid">
    <div class="p-col-12 form-control">
        <label>{{ 'maerdo-geonames.country.label' | translate }} :</label>
    </div>
    <div class="p-col-12 form-control">
        <p-autoComplete name="country" (onDropdownClick)="searchCountry($event)" dropdownMode="blank"  (onSelect)="selectCountry($event)" (completeMethod)="searchCountry($event)" [suggestions]="countries" [(ngModel)]="selectedCountry" [dropdown]="true" dataKey="iso" field="label"></p-autoComplete>
    </div>
    <div class="p-col-12 form-control">
      <label>{{ 'maerdo-geonames.city.city.label' | translate }} :</label>
    </div>
    <div class="p-col-12 form-control">
      <p-autoComplete  #citiesAutocomplete (onDropdownClick)="search($event)" name="city" dropdownMode="blank"  (onSelect)="selectCity($event)" (completeMethod)="search($event)" [suggestions]="cities" [(ngModel)]="selectedCity" [dropdown]="true" dataKey="id" field="label"></p-autoComplete>
    </div>
</div>

而这个组件：

import {
  Component,
  EventEmitter,
  Input,
  OnInit,
  Output,
  SimpleChanges,  
  ViewChild,
  ElementRef,
  ViewEncapsulation,
} from '@angular/core';
import {ComponentAbstract} from "@app/maerdo-core/libraries/ComponentAbstract.class";
import {Maerdo} from "@app/maerdo-core/services/front/Maerdo.service";

@Component({
  selector: 'maerdo-geonames-city',
  templateUrl: './maerdo-geonames-city.component.html',
  styleUrls: ['./maerdo-geonames-city.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class MaerdoGeonamesCityComponent extends ComponentAbstract implements OnInit {
  
  public showDetails = false;  
  public countries = [];
  public cities = [];
  public countriesOriginals = [];
  public selectedCountry;
  public selectedCity;
   @ViewChild("citiesAutocomplete", {read: ElementRef}) citiesAutocomplete: ElementRef; 
  public city = {
    "name":"",
    "label":"",
    "id":"",
    "adm1":"",
    "adm2":"",
    "country":{"name":"Afghanistan","iso":"AF"}
  }
  public cityLabel;

  constructor() {
    super();
  }

  ngOnInit(): void {
   this.services["http"].post(Maerdo.configuration['back']['ESUrl']+"/countries/_search", this.getCountryQuery()).subscribe(response => {
      for(let country of response.hits.hits) {
        this.countries.push({iso: country['_source']['ISO'], label: country['_source']['Country']});
      }
      this.selectedCountry = this.countries[0];
      this.countriesOriginals = this.countries;
    });
  }
  
  getCountryQuery() {
    return {
      "from":0, "size":252,
      "query": {
      }
    }
  }
  
  getCityQuery(countryCode, city) {
    return {
      "from":0, "size":20,
      "query": {
         "bool": {
            "must": [
              {"match":{"feature_code":"PPL"}},
              {"match":{"country_code2":countryCode}},
              {"prefix":{"name":city}}
            ]
         }
       }
     }
  }


  
  searchCountry(e) {
    if(e.query.length > 0) {
      let pattern = new RegExp("^"+e.query, "i");
      this.countries = this.countriesOriginals.filter(country => pattern.test(country.label));
    } else {
      this.countries = this.countriesOriginals;
    }
  }

  selectCountry(e) {
    this.city.country = e;
  }
  
   search(e) {    
    this.cities = [];       
    this.services["http"].post(Maerdo.configuration['back']['ESUrl']+"/geonames/_search", this.getCityQuery(this.selectedCountry.iso, e.query)).subscribe(response => {
      for(let city of response.hits.hits) {
        this.cities.push({id: city['_source']['geonameid'], label: city['_source']['name']});
      }         
    });            
  }
}

尽管 ajax 响应给出了结果，但该组件不返回任何建议。我认为这是一个同步/异步问题，但我无法找到解决方案。如果我在 search() 方法中的 ajax 调用之后添加一个条目，它会显示但没有 ajax 条目。

有人可以帮助我吗？

标签： angularajaxprimeng