Используйте nativeElement в двух компонентах - PullRequest
Новая
       20

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

0 голосов
/ 12 июня 2018

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

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

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

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

  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, но с одной и той же ошибкой.

1 Ответ

0 голосов
/ 12 июня 2018

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

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

вместо

public searchElement: ElementRef

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

...