Cannot read property 'query' of undefined

Ionic Framework ionic-v3
1

mfXFp
mfXFp.png1401×399 65.5 KB

As you see, in the image marks me error in the query, the truth nsoe what would be

import { HomePage } from './../home/home';
import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams,ViewController } from 'ionic-angular';
import { UbicacionService } from './../../providers/ubicacion/ubicacion';
import { UsuarioService } from './../../providers/usuario/usuario';
import { AgmMap } from '@agm/core';
import { MAP_STYLE } from '../../config/config';
import { Keyboard } from '@ionic-native/keyboard';

declare var google: any;

@IonicPage()
@Component({
  selector: 'page-map',
  templateUrl: 'map.html',
})
export class MapPage {



  @ViewChild(AgmMap) private map: any;
  @ViewChild('searchbar') searchBar;

  usuario: any = {};
  public lat: number;
  public lng: number;
  public zoom: number;
  usuarioSelecionado: any = {};
  siguiendo: boolean = false;
  query:string;
  //
  styles: any = MAP_STYLE;

  //
  autocompleteItems: any;
  autocomplete: any;
  acService: any;

  constructor(public navCtrl: NavController, public navParams: NavParams,
    private _ubicacion: UbicacionService,
    private _us: UsuarioService,
    public viewCtrl: ViewController,
    private keyboard: Keyboard) {

    this._ubicacion.iniciar_localizacion();
    this._ubicacion.usuario
      .subscribe(data => {
        //console.log(data)
        this.usuario = data;
        if (this.siguiendo) {
          //SIguiendo
          for (let usuario of data) {
            if (usuario.$key === this.usuarioSelecionado.$key) {
              this.lat = usuario.lat;
              this.lng = usuario.lng;
            }
          }
        }
      });
  }


  ngOnInit() {
    this.acService = new google.maps.places.AutocompleteService();
    this.autocompleteItems = [];
    this.autocomplete = {
      query: ''
    };
  }

  dismiss() {
    this.viewCtrl.dismiss();
  }

  ionViewDidLoad() {
    setTimeout(() => {
      this.searchBar.setFocus();
      this.keyboard.show();
    }, 600);
  }

  chooseItem(item: any) {
    this.viewCtrl.dismiss(item);
  }

  updateSearch() {
    if (this.autocomplete.query == '') {
      this.autocompleteItems = [];
      return;
    }
    let self = this;
    let config = {
      types: ['address'], // other types available in the API: 'establishment', 'regions', and 'cities'
      input: this.autocomplete.query
    };
    this.acService.getPlacePredictions(config, function (predictions, status) {
      self.autocompleteItems = [];
      if (predictions) {
        predictions.forEach(function (prediction) {
          self.autocompleteItems.push(prediction);
        });
      }
      else {
        console.log('no predictions');
      }
    });
  }
}

And this is the html.

<ion-searchbar #searchbar [(ngModel)]="autocomplete.query" [showCancelButton]="true" [cancelButtonText]="'ΆÎșÏ…ÏÎż'" [spellcheck]="false" [autocomplete]="false" [autocorrect]="false" (ionInput)="updateSearch()" (ionCancel)="dismiss()" placeholder="Please enter address...">
</ion-searchbar>
<ion-list>
    <ion-item *ngFor="let item of autocompleteItems" (click)="chooseItem(item)">
        {{ item.description }}
    </ion-item>
</ion-list>

I hope that with all the information provided, they can help me, Thanks

2

Initialize every object or array property to at least an empty object or array and you will avoid bugs like this. In this case, autocomplete needs to be initialized to at least {}. Also, please get rid of all the instances of any. They make your code harder to read and much more error-prone.

3

On top of what @rapropos said, you don’t need to be doing any of this var self = this; stuff.

Instead, whenever you would type function (...) type (...) => and then you can safely use this.

1 Like
4

This is a great point. I usually phrase it as “never write the word ‘function’ inside of one”, but I should probably leave out the last three words. Yes, there are legitimate reasons for declaring top-level exported functions, but 98% of people who need this advice aren’t making them.