这是我的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模板
<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
函数后没有得到更新,有什么办法可以在视图上获取更新值吗?
答案 0 :(得分:3)
您可以查看此angular2官方文档以设置属性
备忘单 - https://angular.io/docs/ts/latest/cheatsheet.html
am_buttons
更新
<input id="google_places_ac" [attr.state]="state" [attr.country]="coutnry"
name="google_places_ac" type="text" value="{{city}}" class="form-control" />
答案 1 :(得分:1)
您应该通过在[]
<input id="google_places_ac" [attr.state]="state" [attr.country]="coutnry"
name="google_places_ac" type="text" [value]="city" class="form-control" />
另外一件事是,你在编写country
时写了coutnry
,而不是在两个地方写了this.sharedService.country = this.coutnry; //in constructor
attr.country="{{coutnry}}" //second place
。
var $canvas = {
activePaths: []
};
// Bind to `onMouseDown` event.
function onMouseDown = function (options) {
var mousePos = canvas.getPointer(options.e);
mousePos.x = parseInt(mousePos.x);
mousePos.y = parseInt(mousePos.y);
var width = canvas.getWidth();
var height = canvas.getHeight();
var pixels = canvas.getContext().getImageData(0, 0, width, height);
var pixel = (mousePos.x + mousePos.y * pixels.width) * 4;
var activePathsColor = new fabric['Color']('rgb(' + pixels.data[pixel] + ',' + pixels.data[pixel + 1] + ',' + pixels.data[pixel + 2] + ')');
var colorHex = '#' + activePathsColor.toHex().toLowerCase();
var activeObject = canvas.getActiveObject();
var activePath = [];
// Check if active objects are type of `group`, if so push the selected path.
if(activeObject.type == 'group') {
for (var i = 0; i < activeObject.getObjects().length; i++) {
var path = activeObject.getObjects()[i];
if (path.getFill().toLowerCase() == colorHex) {
$canvas.activePaths.push(path);
}
}
}
}