Диалог материалов не открывается после нажатия на маркер в ngx-листке

Я использую ngx-leaflet и ngx-leaflet-draw для отображения карты листовок. Я могу отобразить маркер на карте с помощью значка маркера на панели инструментов. Я хочу отображать компонент диалогового окна материала, когда я нажимаю на маркер. Я могу отображать координаты маркера на консоли, когда нажимаю на маркер. код

public onMapReady(map: L.Map) {
    map.on(L.Draw.Event.CREATED, function(e) {
      const type = (e as any).layerType,
        layer = (e as any).layer;

      if (type === 'marker') {
        const markerCoordinates = layer._latlng;
        layer.on('click', () => {
          console.log(markerCoordinates); // works properly
        });
      }
    });
  }

Затем я пытаюсь изменить код для отображения компонента диалогового окна материала, но получаю ошибку

import { NgZone } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { MaterialDialogComponent } from './m-dialog.component';
...
...
export class NgxLeafletComponent {
  dialogRef: MatDialogRef<MaterialDialogComponent>;

  public constructor(private zone: NgZone) {}

  public onMapReady(map: L.Map) {
      map.on(L.Draw.Event.CREATED, function(e) {
        const type = (e as any).layerType,
          layer = (e as any).layer;

        if (type === 'marker') {
          const markerCoordinates = layer._latlng;
          layer.on('click', () => {
            console.log(markerCoordinates); 
            this.zone.run(() => this.onClickMarker()); //error
          });
        }
      });
    }

  onClickMarker() {
    this.dialogRef = this.dialog.open(MaterialDialogComponent);
  }
 }

вывод ошибки: Вывод консоли ошибок

Я также пробую это без zone.run() метода, напрямую dialog.open() метода, но снова обнаружил ошибку

Uncaught TypeError: невозможно прочитать свойство open of undefined

ПРИМЕЧАНИЕ: когда я пробую использовать этот метод вне onMapReady() и без ngx-leaflet, он работает совершенно нормально.


angular leaflet typeerror ngx-leaflet material-dialog
person Shatu    schedule 12.05.2020    source источник
comment
в основном map.on (L.Draw.Event.CREATED, function (e) {здесь не вызываются никакие внешние функции / методы. Какое решение?})   -  person Shatu    schedule 12.05.2020

Ответы (1)


arrow_upward
1
arrow_downward

Я понял проблему и решил ее. здесь я использовал обычную функцию () для map.on(L.Draw.Event.CREATED, function(e) {...}, которой не разрешено вызывать другую функцию. Поэтому для вызова в ней другого метода / функции необходимо использовать стрелочную функцию.

import { NgZone } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { MaterialDialogComponent } from './m-dialog.component';
...
...
export class NgxLeafletComponent {
  dialogRef: MatDialogRef<MaterialDialogComponent>;

  public constructor(private zone: NgZone) {}

  public onMapReady(map: L.Map) {
      map.on(L.Draw.Event.CREATED, (e) => {
        const type = (e as any).layerType,
          layer = (e as any).layer;

        if (type === 'marker') {
          const markerCoordinates = layer._latlng;
          layer.on('click', () => {
            console.log(markerCoordinates); 
            this.zone.run(() => this.onClickMarker()); //error
          });
        }
      });
    }

  onClickMarker() {
    this.dialogRef = this.dialog.open(MaterialDialogComponent);
  }
 }

person Shatu    schedule 17.05.2020