Карты Bing Angular MapComponent: TypeError: nativeElement undefined - PullRequest
Новая
       66

Карты Bing Angular MapComponent: TypeError: nativeElement undefined

0 голосов
/ 30 апреля 2020

При загрузке моего пользовательского компонента MapComponent появляется следующая ошибка. 

TypeError: Cannot read property 'nativeElement' of undefined at MapComponent.ngOnInit

Я получаю сообщение об ошибке, связанной с MapComponent, который я использую для плоттера местоположения Bing Maps.

Вот компонент.ts 

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit, AfterViewInit {
  reports: Report[] = [];

  constructor(private apiService: ApiService) {
    console.log("start");
    this.getAllReports();
    console.log("finished reports");
    //adds markers to map
    this._markers.push({ latitude: 29.714994, longitude: -95.46244})
    console.log("pushed a marker");
    for(let i:number=0; i<20; i++){
      this._markers.push({ latitude: 29.714994 + Math.random() - Math.random(), longitude: -95.46244 + Math.random() - Math.random()});
    }
  }

  _markerTypeId = MarkerTypeId;
  _options: IMapOptions = {
    disableBirdseye: false,
    disableStreetside: false,
    navigationBarMode: 1,
    zoom: 6
  };

  _box: IBox = {
    maxLatitude: 32,
    maxLongitude: -92,
    minLatitude: 29,
    minLongitude: -98
  };

  _iconInfo: IMarkerIconInfo = {
    markerType: MarkerTypeId.CanvasMarker,
    rotation: 45,
    drawingOffset: { x: 12, y: 0 },
    points: [
      { x: 5, y: 20 },
      { x: 12, y: 15 },
      { x: 19, y: 20 },
      { x: 12, y: 0 }
    ],
    color: '#f00',
    size: { width: 24, height: 24 }
  };

  _markers: Array<ILatLong> = new Array<ILatLong>();

  _click(index: number){
    console.log(`Marker ${index} says: hello world...`);
  }

}

Вот связанный компонент. html

<div style="height: 600px">
  <x-map #xmap [Options]="_options" [Box]="_box">
    <x-map-marker *ngFor="let m of _markers; let i=index" [Latitude]="m.latitude" [Longitude]="m.longitude" [Title]="'My Marker ' + i.toString()" [IconInfo]="_iconInfo">
    </x-map-marker>
  </x-map>
</div>

Я новичок в Angular и не знаю, как точно определить что нужно сделать, чтобы исправить эту ошибку, особенно если ошибка происходит внутри MapComponent (поддерживаемый компонент I npm 'ed). Ни один из моих операторов console.log не выполняется (см. Конструктор), что означает, что ошибка может произойти до инициализации компонента?

РЕДАКТИРОВАТЬ, НАПИСЫВАЯ ЭТО: Кажется, я назвал свой пользовательский компонент MapComponent , В MapModule / angular -maps также есть MapComponent. js Я использую. Это источник моей проблемы? Ошибка происходит в MapComponent из MapModule, а не в MapComponent, который я создал (Google Chrome указывает на файл, в котором возникла ошибка).

enter image description here

Любые предложения помогут. Подскажите, где искать!

...