Ionic 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 + '
' + 'message: ' + error.message + '
');
    }
    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.

推荐答案

您得到的错误表明 this 为空.用箭头函数替换分配给 onSuccess 的函数.它将为 this 使用正确的值.

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
        }
    })]);
}

这篇关于Ionic 3 值绑定地理定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！