Polymer this.push funktioniert nicht

Question

In Polymer 1.x versuche ich Daten aus meiner Datenbank in ein Array zu pushen, aber aus welchem ​​Grund auch immer, es funktioniert plötzlich nicht mehr.

Wenn dieser Code ausgeführt wird

ready: function(){ 
    var leserbriefRef = firebase.database().ref('leserbriefe'); 
     leserbriefRef.on('value', function(snap) { 
      var n = snap.child('numLeserbriefe').val(); 
      console.log(n); 
      this.lbriefe = []; 
      for(var i=0; i<n; i++){ 
       this.push("lbriefe", snap.child('l'+(n - 1 - i)).val()); 
      } 
     }); 
    } 

Ich bekomme diese Fehlermeldung: firebase.js: 283 Uncaught Typeerror: this.push keine Funktion ist

Ich weiß nicht, warum. Anfang der Woche funktionierte es noch.

Answer 1

Dies ist eine gemeinsame Sache unter js Anfänger, im Grunde die Verwendung der this Stichwort. Der Kontext der Variablen this innerhalb der anonymen Funktion ist nicht der von Ihnen beabsichtigte (in diesem Fall das Element). Um das Problem zu lösen, können Sie Schließungen [1], .bind [2] oder die neueren ES2015-Pfeilfunktionen [3] verwenden.

Closure

ready: function() { 
    // assign this to self 
    var self = this; 

    var leserbriefRef = firebase.database().ref('leserbriefe'); 
    leserbriefRef.on('value', function(snap) { 
    var n = snap.child('numLeserbriefe').val(); 
    console.log(n); 
    self.lbriefe = []; 
    for(var i = 0; i < n; i++){ 
     self.push("lbriefe", snap.child('l'+(n - 1 - i)).val()); 
    } 
    }); 
} 

.bind

ready: function() { 
    var leserbriefRef = firebase.database().ref('leserbriefe'); 
    leserbriefRef.on('value', function(snap) { 
    var n = snap.child('numLeserbriefe').val(); 
    console.log(n); 
    this.lbriefe = []; 
    for(var i = 0; i < n; i++){ 
     this.push("lbriefe", snap.child('l'+(n - 1 - i)).val()); 
    } 
    }.bind(this)); // bind this keyword to element's 
} 

ES2015 Pfeil-Funktion (könnte genauso gut gehen voll ES2015)

ready() { 
    const leserbriefRef = firebase.database().ref('leserbriefe'); 
    leserbriefRef.on('value', (snap) => { // arrow functions! 
    const n = snap.child('numLeserbriefe').val(); 
    console.log(n); 
    this.lbriefe = []; 
    for(let i = 0; i < n; i++){ 
     this.push("lbriefe", snap.child(`l${n - 1 - i}`).val()); 
    } 
    }); 
} 

Quellen:

[1] https://developer.mozilla.org/en/docs/Web/JavaScript/Closures

[2] https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind

[3] https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Answer 2

gut Sie für this aufpassen verbindlich, da der Umfang der this Änderungen innerhalb von Funktionen ist.

ready: function(){ 
    var leserbriefRef = firebase.database().ref('leserbriefe'); 
     leserbriefRef.on('value', function(snap) { 
      var n = snap.child('numLeserbriefe').val(); 
      console.log(n); 
      this.lbriefe = []; 
      for(var i=0; i<n; i++){ 
       this.push("lbriefe", snap.child('l'+(n - 1 - i)).val()); 
      } 
     }.bind(this)); 
    }