值后的数据更新,angular2和打字稿视图不更新 [英] value not updating in the view after data update , angular2 and typescript
本文介绍了值后的数据更新,angular2和打字稿视图不更新的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这是我的 ngOnInit
函数
instance.input = document.getElementById('google_places_ac');
autocomplete = new google.maps.places.Autocomplete(instance.input, { types: ['(cities)']});
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var place = autocomplete.getPlace();
instance.setValue(place.address_components[3].long_name, place.address_components[2].long_name, place.address_components[1].long_name);
});
这是我的的setValue()
函数
public setValue(a,b,c) {
this.coutnry = a;
this.state = b;
this.city = c;
this.sharedService.country = this.coutnry;
this.sharedService.city = this.city;
this.sharedService.state = this.state;
console.log(a, b, c);
}
和下面是我的HTML模板显示和获取值
and below is my html template to show and get the values
<input id="google_places_ac" attr.state="{{state}}" attr.country="{{coutnry}}" name="google_places_ac" type="text" value="{{city}}" class="form-control" />
问题是我的HTML属性没有得到一次 place_changed
更新函数被调用,有什么我需要做的得到更新的观点价值观?
the problem is my html attributes not getting updated once place_changed
function is called,is there anything i have to do to get updated values on view?
推荐答案
您可以检查此angular2官方的文档设立的属性,
you can check this angular2 official docs for setting up the attributes,
的cheatsheet - https://angular.io/docs/ts/latest/cheatsheet。 HTML
cheatsheet - https://angular.io/docs/ts/latest/cheatsheet.html
<input id="google_places_ac" [attr.state]="state" [attr.country]="coutnry"
name="google_places_ac" type="text" value="{{city}}" class="form-control" />
更新
import { Component, ChangeDetectorRef } from 'angular2/core';
constructor(private cdr:ChangeDetectorRef) {
}
public setValue(a,b,c) {
this.coutnry = a;
this.state = b;
this.city = c;
this.sharedService.country = this.coutnry;
this.sharedService.city = this.city;
this.sharedService.state = this.state;
console.log(a, b, c);
this.cdr.detectChanges();
}
这篇关于值后的数据更新,angular2和打字稿视图不更新的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文