Ansicht nach [versteckt] Flagge von div nicht aktualisiert in angular2 Komponente geändert wird

Question

ich eine benutzerdefinierte Komponente bin, die wie folgt definiert ist:

import { Component, NgModule, OnInit, ViewChild, ElementRef, Input, Output, EventEmitter } from '@angular/core'; 
    import { FormControl, FormsModule, ReactiveFormsModule } from "@angular/forms"; 
    import { AgmCoreModule, MapsAPILoader } from 'angular2-google-maps/core'; 
    import { GoogleLocation } from '../../domain/data/general/googlelocation' 

     @Component({ 
      selector: 'syx-googlemapsplacesautocomplete', 
      providers: [], 
      styles: [], 
      template: `<input name='{{name}}' 
           id='{{id}}' 
           class='input' 
           placeholder="{{placeholderText}}" 
           autocorrect="off" 
           autocapitalize="off" 
           spellcheck="off" 
           type="text" 
           (keyup.enter)="emitEntered()" 
           #search>` 
     }) 


     export class GoogleMapsPlacesAutocomplete implements OnInit { 

      private searchControl: FormControl; 
      private googleLocation: GoogleLocation = new GoogleLocation(); 

      @Input() public placeholderText: string; 
      @Input() public id: string; 
      @Input() public name: string; 

      @Output() notify: EventEmitter<GoogleLocation> = new EventEmitter<GoogleLocation>(); 
      @Output() entered:EventEmitter<string> = new EventEmitter<string>(); 
      @ViewChild("search") 
      public searchElementRef: ElementRef; 

      constructor(private mapsAPILoader: MapsAPILoader) { 
      } 

      emitEntered() { 
       this.entered.emit('complete'); 
      } 

      ngOnInit() { 
       //create search FormControl 
       this.searchControl = new FormControl(); 

       //load Places Autocomplete 
       this.mapsAPILoader.load().then(() => { 
        let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, { 
         types: ["(cities)"] // only renders cities of world. (Does not render street, area, any business etc.) 
        }); 

        autocomplete.addListener("place_changed",() => { 
         try { 
          //get the place result 
          let place: google.maps.places.PlaceResult = autocomplete.getPlace(); 
          this.googleLocation = new GoogleLocation(); 
          var oParser = new DOMParser(); 
          var oDOM = oParser.parseFromString(place.adr_address, "text/html"); 
          this.googleLocation.Address = oDOM.getElementsByTagName("body")[0].firstChild.textContent; 
          this.googleLocation.StreetAddress = oDOM.getElementsByClassName("street-address")[0].innerHTML; 
          this.googleLocation.Locality = oDOM.getElementsByClassName("locality")[0].innerHTML; 
          this.googleLocation.Country = oDOM.getElementsByClassName("region")[0].innerHTML; 
          this.googleLocation.PostalCode = oDOM.getElementsByClassName("postal-code")[0].innerHTML; 
          this.googleLocation.CountryName = oDOM.getElementsByClassName("country-name")[0].innerHTML; 
         } 
         catch (error) { 
         } finally { 
          this.notify.emit(this.googleLocation); 
         } 
        }); 
       }); 


      } 

      resetInput(){ 
       this.searchElementRef.nativeElement.value = ""; 
      } 
     } 

Ich habe Datenmodellklasse wie folgt:

export class GoogleLocation { 
    public Address: string; 

    public StreetAddress: string; 

    public Locality: string; 

    public Region: string; 

    public PostalCode: string; 

    public CountryName: string; 
} 

Und meine Haupt-Seite Komponente ist:

@Component({ 
    selector: 'aa-register', 
    styles: [], 
    templateUrl: "someTemplate" 
}) 

export class RegisterComponent { 
    public googleLocation: GoogleLocation = new GoogleLocation(); 

    private showGoogleLocation : boolean; 

    private city : string; 
    private state : string; 
    private country : string; 
    private postalcode : string; 

    private onNotify(googleLocation: GoogleLocation) { 
     this.googleLocation = googleLocation; 
     this.city = this.googleLocation.Locality; 
     this.state = this.googleLocation.Region; 
     this.country = this.googleLocation.CountryName; 
     this.postalcode = this.googleLocation.PostalCode; 
     this.HideGoogleLocation(); 
    } 

    constructor() { 
     this._mapTextBoxPlaceHolderText = "e.g. Brussels"; 
     this.showGoogleLocation = true; 
    } 

    HideGoogleLocation() : void 
    { 
     this.showGoogleLocation = false; 
    } 

    ShowGoogleLocation() : void 
    { 
     this.showGoogleLocation = true; 
     this.googleLocation = new GoogleLocation(); 
     this.city = this.googleLocation.Locality; 
     this.state = this.googleLocation.Region; 
     this.country = this.googleLocation.CountryName; 
     this.postalcode = this.googleLocation.PostalCode; 
    } 
} 

die hTML-Anwendung ist:

Die Flagge wird geändert, aber div Sichtbarkeitsänderungen werden nur angezeigt, wenn ich außerhalb von 'txtCity' klicke oder Enter drücke.

Ich möchte, dass Benutzer an einer Stelle: z. Typen Mumb und wählt "Mumbai, Maharashtra, Indien" aus der Ortsliste und im selben Moment div "google_location" verbirgt sich und der Ort wird automatisch in anderen div's d. h. "create_location_content" Textfelder und andere div wird sichtbar.

Answer 1

Ich gehe davon aus, dass eine externe API beteiligt ist, die ShowGoogleLocation aufruft, was bewirkt, dass die Änderungserkennung nicht erkennt, dass sie ausgeführt werden muss.

Laufen sollte ausdrücklich das Problem beheben:

constructor(private cdRef:ChangeDetectorRef) { 

... 

ShowGoogleLocation() : void 
{ 
    this.showGoogleLocation = true; 
    this.googleLocation = new GoogleLocation(); 
    this.city = this.googleLocation.Locality; 
    this.state = this.googleLocation.Region; 
    this.country = this.googleLocation.CountryName; 
    this.postalcode = this.googleLocation.PostalCode; 

    this.cdRef.detectChanges(); 
}