场景
我正在使用Angular2开发一个Ionic2应用程序,用户可以在其中选择其国家/地区内的位置。哪个工作正常。我正在使用谷歌地方自动完成 API。但我想通过在我的应用程序中使用 Rxjs 在可观察量中使用此 API 的一些方法。
以下是我当前的代码,工作正常:
首页.html
<ion-header>
<ion-toolbar>
<ion-searchbar [(ngModel)]="autocomplete.query" [showCancelButton]="true" (ionInput)="updateSearch()"></ion-searchbar>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item *ngFor="let item of autocompleteItems" tappable (click)="chooseItem(item)">
{{ item }}
</ion-item>
</ion-list>
</ion-content>
首页
city: string;
address;
autocompleteItems;
autocomplete;
service = new google.maps.places.AutocompleteService();
constructor(public navCtrl: NavController, platform: Platform, private zone: NgZone) {
this.city = "Karachi";
this.autocompleteItems = [];
this.autocomplete = {
query: ''
};
this.address = {
place: ''
}
}
chooseItem(item: any) {
item.split[','];
console.log(item);
this.autocomplete.query = item[1];
}
updateSearch() {
if (this.autocomplete.query == '') {
this.autocompleteItems = [];
return;
}
let me = this;
this.service.getPlacePredictions({
input: this.autocomplete.query, componentRestrictions: {country: 'PK'}
}, function (predictions, status) {
me.autocompleteItems = [];
me.zone.run(function () {
if(predictions != null){
predictions.forEach(function (prediction) {
me.autocompleteItems.push(prediction.description);
});
}
else {
return;
}
});
});
}
问题
在可观察量中转换上述代码后,它向我显示了一个错误Property 'getPlacePredictions' does not exist on type '{}'.
请帮助我在这种情况下如何转换 Rxjs 可观察量中的update()
函数代码。
以下是我的可转换代码:
ngOnInit() {
Observable.from(this.service).map((data) => {
return data.getPlacePredictions({
input: this.autocomplete.query, componentRestrictions: {country: 'PK'}
}, (predictions, status) => {
return predictions;
})
}).subscribe(console.log) //Final Results}
}
试试这个。
链接: http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-bindCallback
let getPlaces = Obserable.bindCallback(this.service.getPlacePredictions)
getPlaces({
input: this.autocomplete.query, componentRestrictions: {country: 'PK'}
}). subscribe(predictions, status) => {
console.log(predictions, status);
})