Keine Verwendung ngClass mit Mapzoom Veranstaltung in google Bindung abbildet

Question

Ich habe dies:

<i [ngClass]="{'active': isGeoLocationButtonEnabled }" class="toggle fa fa-crosshairs" > 

Und der Handler ist:

private onStartZoomEvent(event) { 
    if (event.zoom != 12) { 
     console.log("Current zoom level is: ", event.zoom); 
     this._eventAggregator.trigger(new DisableGeolocationEvent()); 
     this.disableGeolocationButton(); 
    } 
} 

Das Ereignis, das wie folgt aussieht ausgelöst:

private mapZoomChangedHandler() { 
    this._mapsWrapper.getMap().then((map: google.maps.Map) => { 
     let zoom = map.getZoom(); 
     this._eventAggregator.trigger(new MapStartZoomEvent(zoom)); 
    }); 
} 

Ich abonniere so:

this._eventAggregator.subscribe(MapStartZoomEvent, this.onStartZoomEvent.bind(this)); 

Das Problem ist, dass zum ersten Mal ich den Kartenzoom ändern, ist die Schaltfläche nicht deaktiviert. Wenn ich das zweite Mal klicke, wird es deaktiviert. Wenn ich debugge, scheint alles in Ordnung zu sein, mein Boolean isGeoLocationButtonEnabled ist auf false gesetzt, aber die aktive Klasse bleibt (es ist nur die Hintergrundfarbe Hervorhebung).

Answer 1

Sie zeigen nicht an, wo isGeoLocationButtonEnabled aktualisiert wird. Ich bin mir ziemlich sicher, dass der Google Maps-Code außerhalb von Angulars Zone läuft.

Verwenden zone.run(...) um den Code auszuführen, die das Modell innerhalb winkelförmigen Stangen Zone aktualisiert, so Änderungserkennung danach aufgerufen wird

constructor(private zone:NgZone) {} 

methodWhereEnabledIsUpdated() { 

    ... 
    this.zone.run(() => { 
    isGeoLocationButtonEnabled = someValue; 
    }); 
    ... 
}