Используйте nativeElement в двух компонентах

1

Я получаю эту ошибку при использовании автозаполнения для угловых карт (AGM),

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'nativeElement' of undefined
TypeError: Cannot read property 'nativeElement' of undefined

при использовании ElementRef для углового public searchElement: ElementRef; ,

строка am получает ошибку:

  public latitude: number;
  public longitude: number;
  public searchControl: FormControl;
  public zoom: number;

  @ViewChild("search")
  public searchElementRef: ElementRef;

  constructor(
    private mapsAPILoader: MapsAPILoader,
    private ngZone: NgZone
  ) {}

  ngOnInit() {
    //set google maps defaults
    this.zoom = 4;
    this.latitude = 39.8282;
    this.longitude = -98.5795;

    //create search FormControl
    this.searchControl = new FormControl();

    //set current position
    this.setCurrentPosition();

    //load Places Autocomplete
    this.mapsAPILoader.load().then(() => {
      let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
        types: ["address"]
      });
      autocomplete.addListener("place_changed", () => {
        this.ngZone.run(() => {
          //get the place result
          let place: google.maps.places.PlaceResult = autocomplete.getPlace();

          //verify result
          if (place.geometry === undefined || place.geometry === null) {
            return;
          }

          //set latitude, longitude and zoom
          this.latitude = place.geometry.location.lat();
          this.longitude = place.geometry.location.lng();
          this.zoom = 12;
        });
      });
    });
  }

На мой взгляд, компонент

  <div class="form-group">
    <input placeholder="search for location" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" class="form-control" #search [formControl]="searchControl">
  </div>
  <agm-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [zoom]="zoom">
    <agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker>
  </agm-map>

Я использую это в двух компонентах, в одном он работает штрафы, а другой - это ошибка. Попробовали использовать разные имена для элемента ref, но сгладили ту же ошибку.

  • 0
    Рассматривали ли вы добавить ссылку на шаблон searchElement в свой файл шаблона? Или ссылку на шаблон search , если у вас есть переменная, объявленная как @ViewChild("search") public searchElementRef: ElementRef;
  • 0
    @AmitChigadani Это то, что у меня есть в моем шаблоне <input class="uk-input uk-form-width-medium" placeholder="search area" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" #search>
Показать ещё 1 комментарий
Теги:
angular
google-maps
google-maps-api-3

1 ответ

0

Вы должны объявить переменную типа

@ViewChild("search") public searchElementRef: ElementRef;

вместо

public searchElement: ElementRef

что означает, searchElement переменная searchElement ссылается на ссылку шаблона search указанную внутри вашего шаблона, как (#search) wrt input element.

  • 0
    Все еще не работает.
  • 0
    Можете ли вы добавить весь код компонента и файла шаблона к вашему вопросу? или создайте ссылку на stackblitz.com с вашей проблемой
Показать ещё 7 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню