离子3值绑定地理位置 [英] Ionic 3 value binding Geolocation
问题描述
ERROR TypeError: Cannot set property 'items' of null
这是以下结果:
</ion-card>
<button ion-button round outline
(click)="logEvent($startTrackingButton)">Start tracking me</button>
<ion-card>
<ion-item>
<h2>Locations:</h2>
<ion-list no-lines>
<h3 ion-item *ngFor="let item of items" (click)="itemSelected(item)">
{{ item }}
</h3>
</ion-list>
</ion-item>
</ion-card>
</ion-content>
(在Component.html中),现在是.ts文件:
(In Component.html), now for its .ts file:
logEvent1(TrackNowButton) {
/*Initializing geolocation*/
// onSuccess Callback
// This method accepts a Position object,
// which contains the
// current GPS coordinates
var onSuccess = function(position) {
this.items = ([{
key: "1", value: {
Latitude: position.coords.latitude,
Longitude: position.coords.longitude
}
}, {
key: "2", value: {
Altitude: position.coords.altitude,
Accuracy: position.coords.accuracy
}
}, {
key: "3", value: {
Altitude_Accuracy: position.coords.altitudeAccuracy,
Heading: position.coords.heading
}
}, {
key: "4", value: {
Speed: position.coords.speed,
Timestamp: position.timestamp
}
}]);
};
// onError Callback receives a PositionError
// object
function onError(error) {
console.log('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
}
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
itemSelected(item: string) {
console.log("Selected Item", item);
}
我希望这是可读的...我不知道我是什么我在数据绑定方面做错了,因为我认为这是错误的地方...
我也相信.ts文件中的部分有问题,我在这里写道:this.items =(。 ..)因为我认为该值不能绑定到HTML或其他东西。
我正在研究一个小程序,它经常跟踪运动并用给定的参数记录它们。后来我想添加Mapbox支持,但我需要先解决一些错误。
I hope this is readable... I don´t know what I´m doing wrong in terms of data binding because that's where I think the mistake is... I also believe that there is something wrong with the part in the .ts file, where I wrote: this.items= (...) as I think that the value can´t be bound to the html or something. I´m working on a little program that tracks movements every so often and logs them with the given parameters. Later I want to add Mapbox support but I need to resolve some errors first.
推荐答案
你得到的错误表明此
为空。用箭头函数替换分配给 onSuccess
的函数。它将使用这个
的正确值。
The error that you get indicates that this
is null. Replace the function assigned to onSuccess
by an arrow function. It will use the correct value for this
.
var onSuccess = (position: any) => {
this.items = ([{
key: "1", value: {
Latitude: position.coords.latitude,
Longitude: position.coords.longitude
}
}, {
key: "2", value: {
Altitude: position.coords.altitude,
Accuracy: position.coords.accuracy
}
}, {
key: "3", value: {
Altitude_Accuracy: position.coords.altitudeAccuracy,
Heading: position.coords.heading
}
}, {
key: "4", value: {
Speed: position.coords.speed,
Timestamp: position.timestamp
}
}]);
};
您可以使用 JSON.stringify
进行转换所选项目为字符串:
You can use JSON.stringify
to convert the selected item to a string:
itemSelected(item: any) {
console.dir(item);
let str = JSON.stringify(item);
...
}
另一方面,如果需要将每个项目定义为字符串,则可以为数组中的每个项目调用 JSON.stringify
。
var onSuccess = (position: any) => {
this.items = ([JSON.stringify({
key: "1", value: {
Latitude: position.coords.latitude,
Longitude: position.coords.longitude
}
}), JSON.stringify({
key: "2", value: {
Altitude: position.coords.altitude,
Accuracy: position.coords.accuracy
}
}), JSON.stringify({
key: "3", value: {
Altitude_Accuracy: position.coords.altitudeAccuracy,
Heading: position.coords.heading
}
}), JSON.stringify({
key: "4", value: {
Speed: position.coords.speed,
Timestamp: position.timestamp
}
})]);
}
这篇关于离子3值绑定地理位置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!