Ionic V2 und Cordova Plugins - Uncaught TypeError: Kann die Eigenschaft 'test' von null nicht setzen

Question

Ich benutze Ionic v2 und Phonegap Barcode Scanner plugin.

Wenn die scanBarcode Ausführung() Funktion unten ich die Störung erhalte:

Uncaught TypeError: Cannot set property 'test' of null 

bei

this.test = result.text; 

Code:

import {Page} from 'ionic-angular'; 


@Page({ 
    templateUrl: 'build/pages/scanBarcode/scanBarcode.html' 
}) 
export class ScanBarcode { 
    constructor() { 
    this.test = ""; 
    } 

    scanBarcode(){ 
    cordova.plugins.barcodeScanner.scan(
     function (result) { 
     console.log(result.text); 
     this.test = result.text; 
     console.log("SB result" + test); 
     }, 
     function (error) { 
     alert("Scanning failed: " + error); 
     } 
    ) 
    } 
} 

Der erste console.log hat keine Fehler und zeigt die richtige Information:

console.log(result.text); 

Answer 1

Das Problem mit Ihrem Code ist, dass Sie versuchen, auf den "This" -Zeiger Ihrer Klasse innerhalb der Ergebnisfunktion der Scan-Methode zuzugreifen.

Um dies zu beheben, gehen Sie wie folgt vor:

scanBarcode(){ 

    //Create 'self' variable outside the scan function, assigning 'this' to it 
    let self = this; 

    cordova.plugins.barcodeScanner.scan(
    function (result) { 
     console.log(result.text); 
     //Use 'self' instead of 'this' to access 'test' 
     self.test = result.text; 
     console.log("SB result" + test); 
    }, 
    function (error) { 
     alert("Scanning failed: " + error); 
    } 
) 
} 

Erklärung

Wenn Sie die .Scan() Funktion aufrufen, können Sie es zwei Rückrufe geben. Sie können 'this' nicht verwenden, um das zu erreichen, was Sie wollen, denn in Javascript hat 'this' den Kontext der Funktion caller.

Wenn Sie in einem Callback auf 'this' zugreifen, hat es normalerweise den Kontext 'window'. Wenn Sie eine Funktion ohne einen Objektkontext aufrufen (und definieren), verwenden Sie tatsächlich den Kontext "Fenster". Beispiel:

function fun(){ console.log('this = window; in here'); 
fun(); 

Was tatsächlich passiert ist:

window.fun = function() { /* ... */ } 
window.fun(); 

(Weitere Informationen zu diesem Thema lesen Sie über die JavaScript-Prototyp basierte Objektorientierung Modell)

In diesem Szenario Sie eine haben würde, kann nicht Set-Eigenschaft 'Test' von undefined Fehler. Aber da Ihr Callback direkt vom cordova-Plugin aufgerufen wird, glaube ich, dass "das" überhaupt keinen Kontext hat (ich bin mir nicht sicher).

Wie auch immer, da der Callback nicht mit dem Kontext Ihrer Klasseninstanz aufgerufen wird, repräsentiert 'this' keine Instanz Ihrer Klasse und hat deshalb keine Eigenschaft 'test'.

Da ein Callback eine Closure ist und sich ein Closure an die Umgebung erinnert, in der er erstellt wurde, weiß der Callback, dass die Variable 'self' existiert. Deshalb können Sie es in diesem Fall verwenden.