1
我有其被定義爲一個自定義組件angular2組分改變之後不被更新如下：視圖[隱藏] DIV的標誌在
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 = "";
}
}
我有數據模型類，如下：
export class GoogleLocation {
public Address: string;
public StreetAddress: string;
public Locality: string;
public Region: string;
public PostalCode: string;
public CountryName: string;
}
而我的主要頁面組件是：
@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;
}
}
html的使用方法是：
<form #myForm="ngForm">
<label for="txtCity" class="font14-roboto-black">CITY NAME</label>
<div id="google_location" [hidden]="!showGoogleLocation">
<syx-googlemapsplacesautocomplete
id="txtCity" name="txtCity"
[(ngModel)]="googleLocation"
required
#txtCity
[placeholderText]="_mapTextBoxPlaceHolderText"
(notify)="onNotify($event)"
ngDefaultControl>
</syx-googlemapsplacesautocomplete>
<br />
<a (click)="HideGoogleLocation()">Enter Address</a>
</div>
<div id="create_location_content" [hidden]="showGoogleLocation">
<input name=txtCityLocation #txtCityLocation="ngModel" id=txtCityLocation name=txtCityLocation type="text" [(ngModel)]="city" >
<label for="txtState">STATE</label>
<input name=txtState #txtState="ngModel" id=txtState name=txtState type="text" [(ngModel)]="state" >
<label for="txtCountry">COUNTRY</label>
<input name=txtCountry #txtCountry="ngModel" id=txtCountry name=txtCountry type="text" [(ngModel)]="country" >
<label for="txtPostalCode">POSTAL CODE</label>
<input name=txtPostalCode #txtPostalCode="ngModel" id=txtPostalCode name=txtPostalCode type="text" [(ngModel)]="postalcode" >
<br />
<a (click)="txtCity.resetInput(); ShowGoogleLocation();">Reset Location</a>
</div>
<div>
<button class="button-primary" type="button" (click)="register($event)" name="btnReady" [disabled]="!myForm.valid">
Ready</button>
<br/>
</div>
</form>
該標誌已更改，但div可見性更改僅在我點擊「txtCity」之外或按下輸入時纔會反映出來。
我想要某個地方的用戶類型： 類型Mumb ，並從位置列表 中選擇「Mumbai，Maharashtra，India」，並在同一時刻div「google_location」隱藏並在其他div的自動填充位置即「create_location_content」文本框中顯示其他div。