Why angular2 two way data binding doesn' t work in this scenario ?
<span style="color:white">{{searchLocation}}</span>
<input name="searchLocation" type="text" placeholder="Search" [(ngModel)]="searchLocation">
<button class="btn btn-outline-success" type="submit" (click)="search()">Search</button>
The target component is HeaderComponent
export class HeaderComponent implements OnInit {
searchLocation: string;
@Output() locationFound: EventEmitter<Position> = new EventEmitter<Position>();
constructor(private _locationService: LocationService) { }
ngOnInit() {
this.searchLocation ="";
}
search():void{
this._locationService.geocodeAddress(this.searchLocation)
.subscribe((position:Position)=>{
this.searchLocation ="new value";
this.locationFound.emit(position);
});
}
}
After the subscribe block the searchLocation change but the view is not updated.
I hope somebody can help me
this.searchLocation ="";
searchLocation is assigned to null. If null is present it won't update the DOM. Try giving some valid string.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.