Cannot read property 'query' of undefined - ionic 3

Question

Hello, can someone help me with this error, I am using the anuglar maps library, for geolocation

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

Answer 1

It looks like your view is getting set before autocomplete is set in your ngOnInit. So autocomplete is still undefined in [(ngModel)]="autocomplete.query"

Either do:

 autocomplete: any = {
      query: ''
    };

in the variable declaration in the class itself

or

Use safe navigation operator ?.

<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>