Ionic 3 值绑定地理定位

Posted 2023-03-13

【中文标题】Ionic 3 值绑定地理定位

【英文标题】：Ionic 3 value binding Geolocation

【发布时间】：2018-05-30 00:46:16

【问题描述】：

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 文件：

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 支持，但我需要先解决一些错误。

【参考方案1】：

你只需要初始化你的数组，如下所示。

items:any = [];

之后，您可以像这样推送值：

this.items.push( key: "1", value:  Latitude: 
    position.coords.latitude, Longitude: position.coords.longitude );

【讨论】：

现在，有一个问题，我得到一个对象作为返回而不是字符串。它的字面意思是：[object, Object], [object, Object]...etc..

【参考方案2】：

您收到的错误表明this 为空。用箭头函数替换分配给onSuccess 的函数。它将使用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将选中的项目转换为字符串：

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】：

您的错误表明您的代码正在点击 onSuccess 方法。

您可以将 this 分配给另一个变量，以便在调用回调函数时使用。 请记住，回调并不总是在您所在的类的上下文中执行。因此 this 可以是未定义的。

您需要这样做：

logEvent1(TrackNowButton) 
  let self = this;
  onSuccess = (position)=>
     self.items = [
         key : '1', value :  
         key : '2', value :  
         key : '3', value :  
      ]
  
  let onError = (error)=>
     console.log('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
  
  navigator.geolocation.getCurrentPosition(onSuccess, onError);