Информация API не отображается до 3-го вызова - PullRequest
Новая
       11

Информация API не отображается до 3-го вызова

0 голосов
/ 26 мая 2019

Я создаю угловое 7 веб-приложение, которое после нажатия кнопки возвращает случайный ресторан вокруг вас в пределах определенного радиуса, для этого я использую API Google Places, который вызывается с прокси-сервером в моем services.component.js.

Проблема в том, что я отображаю только первый ресторан после третьего щелчка или вызова из моего API.

Я пытался использовать setTimeout(), но он явно не работает.

export class HomeComponent implements OnInit {
  lat: number;
  long: number;
  restaurants: ApiData[];
  rest: any;
  show: boolean = false;
  x = document.getElementById("restaurant");

  constructor(private api: Api) {}

  ngOnInit() {}

  getLocation = () => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(this.showPosition);
    } else {
      this.x.innerHTML = "Geolocation is not supported by this browser.";
    }
  }

  showPosition = (position) => {
    this.lat = position.coords.latitude;
    this.long = position.coords.longitude;
  }

  random = (length) => {
    return Math.floor(Math.random() * length)
  }

  displayRest = () => {
    this.rest = this.restaurants[this.random(this.restaurants.length)];
    console.log('restaurant obtained');
  }

  filterRestaurants = () => {
    console.log('clicked');
    this.api.getRestaurants(this.lat, this.long).subscribe((data) => {
      this.restaurants = data.results;
      this.show = true;
      this.displayRest();
    }, error => {
      console.log(error.message)
    });

    console.log(this.rest);
  }
}
...