无法从事件侦听器/ Angular 2的函数内部访问变量

时间:2017-09-08 13:58:52

标签: angular google-maps scope

我正在使用谷歌地图api v3并在我的地图上有一些多边形。我试图添加一个事件,在点击删除它们所有并调用该事件的回调函数内的另一个函数,但我一直得到TypeError:无法在第64行读取未定义的属性'length'(那是在事件监听器内部及其告知我没有定义Polys数组)。此外,如果我尝试在侦听器中添加一个函数,它不会识别它,我认为它与范围问题有关,但我不知道如何解决它。 感谢您的帮助。

export class InicioComponent implements OnInit, AfterViewInit {

  locaciones: Locacion[] = [];
  regiones: Region[];
  polys: any[] = [];
  constructor(private locacionService: LocacionService, private router: Router) { }

  getLocaciones(): void {
    this.locacionService.getLocaciones().then(locaciones => this.locaciones = locaciones);
  }

   public loadLocaciones(router: Router) {
    for (let i = 0; i < this.locaciones.length; i++) {
      const marker = new google.maps.Marker({
        position: new google.maps.LatLng(this.locaciones[i].latitud, this.locaciones[i].longitud),
        map: map,
        label: {
          color: 'black',
          fontWeight: 'bold',
          text: this.locaciones[i].nombre,
        },
        idLocacion: this.locaciones[i].id
      });
      google.maps.event.addListener(marker, 'click',() => {
        router.navigate(['/locacion', this.locaciones[i].id]);
      });
    }
  }
  getRegiones() {
    this.locacionService.getRegiones().then(regiones => {
      this.regiones = regiones;
      console.log(this.regiones);
    });
  }
  loadRegiones(regiones: Region[]) {
    for(let i = 0; i < regiones.length; i++) {
      const p = new google.maps.Polygon({
        paths: regiones[i].mapData.bounds,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        idRegion: regiones[i].id
      });
      p.setMap(map);
      this.polys.push(p);
      google.maps.event.addListener(p, 'click', function(event){
        for( let j = 0; j < this.polys.length; j++) {
        this.polys[j].setMap(null);
        }
        this.loadLocaciones();

      });
    }
  }

1 个答案:

答案 0 :(得分:4)

您需要使用箭头功能()=>,而不是function关键字。使用function关键字时,您将范围缩小为this。将您的代码更改为:

google.maps.event.addListener(p, 'click', (event) => {
    for( let j = 0; j < this.polys.length; j++) {
        this.polys[j].setMap(null);
    }
    this.loadLocaciones();
  });