So aktualisieren Sie die Ansicht nach Änderung in angular2, nachdem der google Ereignis-Listener ausgelöst wurde

Ich versuche die Ansicht zu aktualisieren, nachdem ein Ereignis-Listener ausgelöst wurde. Die Änderung wird jedoch nicht erkannt und wird erst aktualisiert, wenn eine andere Änderung erkannt wird.So aktualisieren Sie die Ansicht nach Änderung in angular2, nachdem der google Ereignis-Listener ausgelöst wurde

import { 
 
    Component, View, bootstrap 
 
} from 'angular2/angular2'; 
 

 
@Component({ 
 
    selector: 'app' 
 
}) 
 
@View({ 
 
    template: '{{keyword}} <input id="keyword" /><br/><span (click)="update()">{{click}}</span>' 
 
}) 
 
class App { 
 
    keyword; 
 
    autocomplete; 
 
    click; 
 
    
 
    constructor() { 
 
    var _this = this; 
 
    var input = (document.getElementById('keyword')); 
 
    this.autocomplete = new google.maps.places.Autocomplete(input); 
 
    google.maps.event.addListener(this.autocomplete, 'place_changed', function(){ 
 
     console.log('place change'); 
 
     _this.keyword = "updated text"; 
 
     _this.click = "not clicked"; 
 
    }); 
 
    this.keyword = "original text"; 
 
    this.click = "click me after selection is made to force change"; 
 
    } 
 
    
 
    update() { 
 
    console.log("click"); 
 
    this.click = "clicked"; 
 
    } 
 
    
 
} 
 

 
bootstrap(App);

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
    <script src="https://jspm.io/system.js"></script> 
 
    <script src="https://code.angularjs.org/2.0.0-alpha.30/angular2.dev.js"></script> 
 
    <script src="https://maps.googleapis.com/maps/api/js??v=3.exp&libraries=places"></script> 
 
    </head> 
 

 
    <body> 
 
    <app></app> 
 
    
 
    <script> 
 
     System.import('main'); 
 
    </script> 
 
    </body> 
 

 
</html>

Wenn Sie den Speicherort in der Eingabe zu ändern, sollte der Text nach links ändern. Es wird nur geändert, nachdem eine andere Änderung erkannt wurde, z. B. durch Klicken auf den folgenden Text.

Was mache ich falsch und wie mache ich es richtig?

Quelle

2015-07-11 ComputerWolf

Ich weiß, das ist alt ... aber kann dies in Winkel v5 getan werden ?? ... Ich höre '' cluster_click''-Event, aber der eckige Materialdialog ist nicht richtig initialisiert – TomP

@jhadesdev führte mich in die richtige Richtung, aber statt zone.runOutsideAngular() brauchte ich zone.run(). Hier ist der vollständige JavaScript-Code, gearbeitet:

import { 
 
    Component, View, bootstrap, NgZone 
 
} from 'angular2/angular2'; 
 

 
@Component({ 
 
    selector: 'app' 
 
}) 
 
@View({ 
 
    template: '{{keyword}} <input id="keyword" /><br/><span (click)="update()">{{click}}</span>' 
 
}) 
 
class App { 
 
    keyword; 
 
    autocomplete; 
 
    click; 
 
    zone: NgZone; 
 
    
 
    constructor(zone:NgZone) { 
 
    this.zone = zone; 
 
    var input = (document.getElementById('keyword')); 
 
    this.autocomplete = new google.maps.places.Autocomplete(input); 
 
    google.maps.event.addListener(this.autocomplete, 'place_changed',()=>{ 
 
     this.zone.run(() => { 
 
     console.log('place change'); 
 
     this.keyword = "updated text"; 
 
     this.click = "not clicked"; 
 
     }); 
 
    }); 
 
    this.keyword = "original text"; 
 
    this.click = "click me after selection is made to force change"; 
 
    } 
 
    
 
    update() { 
 
    console.log("click"); 
 
    this.click = "clicked"; 
 
    } 
 
    
 
} 
 

 
bootstrap(App);

Quelle

2015-07-11 17:29:40 ComputerWolf

Funktioniert es immer noch mit alpha-35? –

funktioniert in 2.0.0-beta.0 – stevethecollier

funktioniert in 2.0.0-beta.14. Denken Sie daran, NgZone aus 'angular2/core' zu importieren – Mono

Ich denke, das Problem ist, dass die Auswahlbox der Autovervollständigung absolut am Ende des Körperelements der Seite positioniert ist, und so außerhalb der Zone, die von Angular verfolgt wird (das ist innerhalb der div, wo die app ist).

Um dies zu ändern, entweder:

einige CSS fügen die Auswahlbox relativ (unter Verwendung von !important) zu positionieren, um es innerhalb der Zone

Trigger die Änderungserkennungs manuell bleiben zu machen, NgZone Verwendung :

zone.run(() => { 
    console.log('place change'); 
    _this.keyword = "updated text"; 
    _this.click = "not clicked"; 
});

Quelle

2015-07-11 08:12:48

Danke, das führte mich zur richtigen Antwort. Ich brauchte eigentlich 'zone.run()' und nicht 'zone.runOutsideAngular'. – ComputerWolf

Es sieht so aus, als ob es mit Alpha-35 nicht mehr funktioniert, irgendeine Idee warum? –

So aktualisieren Sie die Ansicht nach Änderung in angular2, nachdem der google Ereignis-Listener ausgelöst wurde

Antwort

Verwandte Themen