離子3值綁定地理位置

Question

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支持，但首先需要解決一些錯誤。

Answer 1

您收到的錯誤指示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數組中的每個項目調用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
        }
    })]);
}

Answer 2

您只需要初始化數組，如下所示。

items:any = [];

之后，您可以像這樣推送值：

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

Answer 3

您的錯誤表明您的代碼正在點擊onSuccess方法。

您可以在回調函數被調用這個分配給另一個變量使用。 請記住，回調並不總是在您所在的類的上下文中執行。因此， 這可能是不確定的。

這是您需要執行的操作：

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