无法读取未定义的属性“查询”-离子 3答案

【问题标题】：Cannot read property 'query' of undefined - ionic 3无法读取未定义的属性“查询”-离子 3
【发布时间】：2017-08-31 19:27:49
【问题描述】：

你好，谁能帮我解决这个错误，我正在使用 anuglar 地图库，用于地理定位

如您所见，在图像中标记我查询中的错误，事实 nsoe 会是什么

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

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

我希望通过提供的所有信息，他们可以帮助我，谢谢

【问题讨论】：

标签： ionic-framework ionic3

【解决方案1】：

您的视图似乎是在 autocomplete 设置到您的 ngOnInit 之前设置的。所以autocomplete 在[(ngModel)]="autocomplete.query" 中仍然是未定义的

要么做：

 autocomplete: any = {
      query: ''
    };

在类本身的变量声明中

或

使用安全导航运算符?。

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

【讨论】：