Question

您好，有人可以帮我解决这个错误，我正在使用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>

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

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

无法读取未定义的属性'查询' - 离子3

1 个答案: