Ionic 3 Wert Geolokalisierung Bindung

Question

ERROR TypeError: Cannot set property 'items' of null 

Dies ist das Ergebnis von:

</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> 

(In Component.html), jetzt für seine .ts-Datei:

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

Ich hoffe, das lesbar ist ... Ich weiß nicht, was ich an der Datenbindung falsch mache, weil ich glaube, der Fehler ist ... Ich glaube auch, dass etwas mit dem Teil in der .ts-Datei, wo ich wrote: this.items = (...) wie ich denke dass der Wert nicht an das HTML oder etwas gebunden werden kann. Ich arbeite an einem kleinen Programm, das Bewegungen immer wieder verfolgt und sie mit den gegebenen Parametern protokolliert. Später möchte ich Mapbox-Unterstützung hinzufügen, aber ich muss zuerst einige Fehler beheben.

Answer 1

Der Fehler, den Sie bekommen zeigt an, dass this null ist. Ersetzen Sie die zugewiesene Funktion onSuccess durch eine Pfeilfunktion. Es wird den korrekten Wert für this verwenden.

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

Sie können JSON.stringify verwenden das ausgewählte Element in eine Zeichenfolge zu konvertieren:

itemSelected(item: any) { 
    console.dir(item); 
    let str = JSON.stringify(item); 
    ... 
} 

---

Auf der anderen Seite, wenn jedes Element als String definiert werden muss, können Sie JSON.stringify nennen für jeden im Array.

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

Sie müssen nur Ihr Array wie unten gezeigt initialisieren.

items:any = []; 

Danach können Sie die Werte schieben wie so:

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

Answer 3

Ihr Fehler zeigt an, dass der Code onSuccess Methode trifft.

Sie können diese einer anderen Variablen zuweisen, die beim Aufruf der Callback-Funktion verwendet werden soll. Denken Sie daran, dass Rückrufe nicht immer im Kontext der Klasse ausgeführt werden, in der Sie sich befinden. Diese kann undefiniert sein.

Hier ist, wie Sie es tun müssen:

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