2016-07-26 17 views
2

Nicht sicher, was ich hier vermisse.ES6 und variabler Bereich innerhalb eines Versprechens

Ich brauche die Ausgabe von data in this.contact. Im Moment benutze ich eine statische Klassenvariable, aber es scheint dreckig zu sein, das zu tun.

export class contactEdit { 
    static t; // static class var 
    constructor() { 
    this.id = null; 
    this.contact = null; 
    contactEdit.t = this; 
    } 

    activate(id) { 
    this.id = id; 
    let contact = this.contact; // scoped version of class var 
    return dpd.contacts.get(id).then(function(data) { 
     console.log(data); 
     contactEdit.t.contact = data; // this works 
     contact = data; // this doesn't 
    }); 
    } 
} 

Normalerweise würde ich ein var contact in der activate() Funktion erstellen (es funktioniert in der Chrome-Konsole), aber dies scheint nicht in ES6 zu arbeiten.

Chrome Konsole:

var c = null; 
undefined 
c; 
null 
dpd.contacts.get('a415fdc8f5a7184d').then(function(data) { 
     c = data; 
    }); 
Object {}fail: (n)then: (e,t)__proto__: Object 
c; 
Object {firstName: "John", lastName: "Doe", id: "a415fdc8f5a7184d"} 
+1

Haben Sie nicht nur wollen, 'this.contact = data;' statt 'Kontakt = Daten; '? – trincot

+0

'statisches t;' ist nicht ES6. Verwenden Sie Typoskript oder etwas? – Bergi

+2

Sie sollten Versprechensergebnisse sowieso nicht als Instanzeigenschaften speichern. Speichern Sie das Versprechen, wenn Sie müssen. – Bergi

Antwort

13

Sie müssen zwei Dinge tun. Verwenden Sie zuerst eine Pfeilfunktion und zweitens `this.contact = data;

activate(id) { 
    this.id = id; 
    return dpd.contacts.get(id).then(data => { 
    console.log(data); 
    this.contact = data; 
    }); 
} 

Sie verwenden einen Pfeil Funktion, weil sie mit JavaScripts „this“ -Ausgabe befasst, wo dies dem lexikalischen Gültigkeitsbereich der Funktion bezieht, und nicht das Objekt, das Sie sind momentan in. Mit einem Pfeil Funktion stellt sicher, dass this außerhalb der Pfeil-Funktion ist das gleiche wie this innerhalb der Pfeil-Funktion.

Sie müssen this.contact verwenden, da contact eine Instanzeigenschaft der Klasse ist.

+1

beste Antwort auf alle Stapelüberlauf heute –

+0

@MatthewJamesDavis Ich stimme zu, die Pfeil-Funktion macht den Trick. –

+0

@AshleyGrant, könnten Sie vielleicht einen Satz oder zwei hinzufügen, warum die Pfeilfunktion dies behebt? Ich werde darüber nachdenken, aber ich würde anderen sicher helfen. –

2

Das Problem ist, dass contact = data; wird den Wert der lokalen contact Variable aktualisieren, wird aber nicht den Wert der this.contact ändern. Sie müssen stattdessen die Kontakteigenschaft contact aktualisieren. Das Problem ist, dass Sie im Kern Ihrer Funktion keinen Zugriff auf this haben.

Es gibt verschiedene Möglichkeiten, dies zu lösen.

1- Sie können so bei der Schließung von activate activate Kontext (this) in eine Variable speichern, dass Sie es im Inneren des Kerns von then zugreifen können.

activate(id) { 
    this.id = id; 
    let that = this; 
    return dpd.contacts.get(id).then(function(data) { 
     console.log(data); 
     that.contact = data; 
    }); 
    } 

2- Sie können die Funktion this binden, so können Sie darauf zugreifen.

activate(id) { 
    this.id = id; 
    return dpd.contacts.get(id).then(function(data) { 
     console.log(data); 
     this.contact = data; 
    }.bind(this)); 
    } 

3- (mit ES6 empfohlen) Sie einen Pfeil Funktion können (Pfeil Funktionen den Kontext erhalten)

activate(id) { 
    this.id = id; 
    return dpd.contacts.get(id).then((data) => { 
     console.log(data); 
     this.contact = data; 
    }); 
    } 
+0

Ich hatte bereits # 1 ohne Glück versucht. Ich werde versuchen, # 2 zu versuchen, um zu sehen, wie das funktioniert. # 3 funktioniert. –

+0

# 1 und # 2 funktionieren auch. Mein Fehler war 'let contact = this.contact'. Anscheinend wird das nicht funktionieren, wo es so funktioniert. Seltsam, aber ich nehme es. –

+0

Das ist nicht seltsam. Wenn Sie 'contact = something' angeben, weisen Sie der 'contact' ** - Variablen ** einen neuen Wert zu. Sie ändern den vorherigen Wert nicht, der ihm zugewiesen wurde. Was Sie versuchen, ist, die 'contact' Eigenschaft des' this' Objektes zu ändern. Diese Eigenschaft hat keinen Bezug zur Variablen 'contact' (abgesehen von der Tatsache, dass Sie ihren Wert auf den Wert initialisieren, auf den" this.contact "zeigt). Die einzige Möglichkeit, den Wert, auf den die Property 'prop' eines Objekts' obj' zeigt, zu ändern, besteht darin, etwas ähnliches wie 'obj.prop = irgendwas' zu schreiben. –

Verwandte Themen