Wie kann man in einem Rückruf auf das richtige "this" zugreifen?
Ich habe eine Konstruktorfunktion, die einen Ereignishandler registriert:
function MyConstructor(data, transport) {
this.data = data;
transport.on('data', function () {
alert(this.data);
});
}
// Mock transport object
var transport = {
on: function(event, callback) {
setTimeout(callback, 1000);
}
};
// called as
var obj = new MyConstructor('foo', transport);
Ich kann jedoch nicht auf die data
Eigenschaft des erstellten Objekts innerhalb des Rückrufs zugreifen . Es sieht so aus, als würde this
es sich nicht auf das erstellte Objekt beziehen, sondern auf ein anderes.
Ich habe auch versucht, eine Objektmethode anstelle einer anonymen Funktion zu verwenden:
function MyConstructor(data, transport) {
this.data = data;
transport.on('data', this.alert);
}
MyConstructor.prototype.alert = function() {
alert(this.name);
};
aber es zeigt die gleichen Probleme.
Wie kann ich auf das richtige Objekt zugreifen?
Antworten
Was Sie wissen sollten this
this
(auch bekannt als "der Kontext") ist ein spezielles Schlüsselwort in jeder Funktion und sein Wert hängt nur davon ab, wie die Funktion aufgerufen wurde, nicht davon, wie / wann / wo sie definiert wurde. Es wird nicht wie andere Variablen von lexikalischen Bereichen beeinflusst (mit Ausnahme der Pfeilfunktionen, siehe unten). Hier sind einige Beispiele:
function foo() {
console.log(this);
}
// normal function call
foo(); // `this` will refer to `window`
// as object method
var obj = {bar: foo};
obj.bar(); // `this` will refer to `obj`
// as constructor function
new foo(); // `this` will refer to an object that inherits from `foo.prototype`
Weitere this
Informationen finden Sie in der MDN-Dokumentation .
Wie man sich auf das Richtige bezieht this
Verwenden Sie Pfeilfunktionen
ECMAScript 6 führte Pfeilfunktionen ein , die als Lambda-Funktionen betrachtet werden können. Sie haben keine eigene this
Bindung. Stattdessen this
wird im Gültigkeitsbereich genau wie bei einer normalen Variablen nachgeschlagen. Das heißt, Sie müssen nicht anrufen .bind
. Dies ist nicht das einzige spezielle Verhalten, das sie haben. Weitere Informationen finden Sie in der MDN-Dokumentation.
function MyConstructor(data, transport) {
this.data = data;
transport.on('data', () => alert(this.data));
}
Nicht benutzen this
Sie möchten eigentlich nicht this
speziell auf das Objekt zugreifen , auf das es sich bezieht . Aus diesem Grund besteht eine einfache Lösung darin, einfach eine neue Variable zu erstellen, die sich auch auf dieses Objekt bezieht. Die Variable kann einen beliebigen Namen haben, aber gebräuchliche sind self
und that
.
function MyConstructor(data, transport) {
this.data = data;
var self = this;
transport.on('data', function() {
alert(self.data);
});
}
Da self
es sich um eine normale Variable handelt, folgt sie den Regeln des lexikalischen Bereichs und ist innerhalb des Rückrufs zugänglich. Dies hat auch den Vorteil, dass Sie auf den this
Wert des Rückrufs selbst zugreifen können .
Expliziter Satz this
des Rückrufs - Teil 1
Es könnte so aussehen, als hätten Sie keine Kontrolle über den Wert von, this
da sein Wert automatisch festgelegt wird, aber das ist tatsächlich nicht der Fall.
Jede Funktion hat die Methode .bind
[docs] , die eine neue Funktion mit this
an einen Wert gebundenem Wert zurückgibt . Die Funktion hat genau das gleiche Verhalten wie die von Ihnen aufgerufene .bind
, nur dass diese this
von Ihnen festgelegt wurde. Unabhängig davon, wie oder wann diese Funktion aufgerufen wird, this
wird immer auf den übergebenen Wert verwiesen.
function MyConstructor(data, transport) {
this.data = data;
var boundFunction = (function() { // parenthesis are not necessary
alert(this.data); // but might improve readability
}).bind(this); // <- here we are calling `.bind()`
transport.on('data', boundFunction);
}
In diesem Fall binden wir die Rückrufe this
an den Wert von MyConstructor
's this
.
Hinweis: Verwenden Sie als Bindungskontext für jQuery stattdessen jQuery.proxy
[docs] . Der Grund dafür ist, dass Sie den Verweis auf die Funktion nicht speichern müssen, wenn Sie einen Ereignisrückruf aufheben. jQuery erledigt das intern.
Satz this
des Rückrufs - Teil 2
Einige Funktionen / Methoden, die Rückrufe akzeptieren, akzeptieren auch einen Wert, auf den sich die Rückrufe this
beziehen sollten. Dies ist im Grunde dasselbe wie das Binden selbst, aber die Funktion / Methode erledigt es für Sie. Array#map
[docs] ist eine solche Methode. Seine Unterschrift lautet:
array.map(callback[, thisArg])
Das erste Argument ist der Rückruf und das zweite Argument ist der Wert, this
auf den Bezug genommen werden soll. Hier ist ein erfundenes Beispiel:
var arr = [1, 2, 3];
var obj = {multiplier: 42};
var new_arr = arr.map(function(v) {
return v * this.multiplier;
}, obj); // <- here we are passing `obj` as second argument
Hinweis: Ob Sie einen Wert für übergeben können oder nicht, this
wird normalerweise in der Dokumentation dieser Funktion / Methode erwähnt. Zum Beispiel jQuery- $.ajax
Methode [docs] beschreibt eine Option namens context
:
Dieses Objekt wird zum Kontext aller Ajax-bezogenen Rückrufe.
Häufiges Problem: Verwenden von Objektmethoden als Rückruf- / Ereignishandler
Eine weitere häufige Manifestation dieses Problems ist die Verwendung einer Objektmethode als Rückruf- / Ereignishandler. Funktionen sind in JavaScript erstklassige Bürger, und der Begriff "Methode" ist nur ein umgangssprachlicher Begriff für eine Funktion, die ein Wert einer Objekteigenschaft ist. Diese Funktion hat jedoch keinen spezifischen Link zu ihrem "enthaltenden" Objekt.
Betrachten Sie das folgende Beispiel:
function Foo() {
this.data = 42,
document.body.onclick = this.method;
}
Foo.prototype.method = function() {
console.log(this.data);
};
Die Funktion this.method
wird als Klickereignishandler zugewiesen. Wenn Sie jedoch auf klicken document.body
, wird der protokollierte Wert angezeigt undefined
, da er sich im Ereignishandler this
auf document.body
die Instanz von und nicht auf die Instanz von bezieht Foo
.
Wie bereits eingangs erwähnt this
, hängt es davon ab, wie die Funktion aufgerufen wird und nicht davon, wie sie definiert ist .
Wenn der Code wie folgt lautet, ist es möglicherweise offensichtlicher, dass die Funktion keinen impliziten Verweis auf das Objekt hat:
function method() {
console.log(this.data);
}
function Foo() {
this.data = 42,
document.body.onclick = this.method;
}
Foo.prototype.method = method;
Die Lösung ist dieselbe wie oben erwähnt: Wenn verfügbar, verwenden Sie .bind
diese Option, um explizit this
an einen bestimmten Wert zu binden
document.body.onclick = this.method.bind(this);
oder rufen Sie die Funktion explizit als "Methode" des Objekts auf, indem Sie eine anonyme Funktion als Rückruf- / Ereignishandler verwenden und das Objekt ( this
) einer anderen Variablen zuweisen :
var self = this;
document.body.onclick = function() {
self.method();
};
oder verwenden Sie eine Pfeilfunktion:
document.body.onclick = () => this.method();
Es gibt verschiedene Möglichkeiten, auf den übergeordneten Kontext im untergeordneten Kontext zuzugreifen:
- Sie können die
bind()
Funktion verwenden. - Speichern Sie den Verweis auf context / this in einer anderen Variablen (siehe Beispiel unten).
- Verwenden Sie die ES6- Pfeilfunktionen .
- Alte Code / Funktion Design / Architektur - für das Sie das Kommando über haben sollten , Design Patterns in JavaScript.
1. Verwenden Sie die bind()
Funktion
function MyConstructor(data, transport) {
this.data = data;
transport.on('data', ( function () {
alert(this.data);
}).bind(this) );
}
// Mock transport object
var transport = {
on: function(event, callback) {
setTimeout(callback, 1000);
}
};
// called as
var obj = new MyConstructor('foo', transport);
Wenn Sie verwenden underscore.js
- http://underscorejs.org/#bind
transport.on('data', _.bind(function () {
alert(this.data);
}, this));
2 Speichern Sie den Verweis auf context / this in einer anderen Variablen
function MyConstructor(data, transport) {
var self = this;
this.data = data;
transport.on('data', function() {
alert(self.data);
});
}
3 Pfeilfunktion
function MyConstructor(data, transport) {
this.data = data;
transport.on('data', () => {
alert(this.data);
});
}
Es ist alles in der "magischen" Syntax des Aufrufs einer Methode:
object.property();
Wenn Sie die Eigenschaft aus dem Objekt abrufen und auf einmal aufrufen, ist das Objekt der Kontext für die Methode. Wenn Sie dieselbe Methode aufrufen, jedoch in separaten Schritten, ist der Kontext stattdessen der globale Bereich (Fenster):
var f = object.property;
f();
Wenn Sie die Referenz einer Methode erhalten, ist diese nicht mehr an das Objekt angehängt, sondern nur eine Referenz auf eine einfache Funktion. Das gleiche passiert, wenn Sie die Referenz erhalten, die als Rückruf verwendet werden soll:
this.saveNextLevelData(this.setAll);
Hier würden Sie den Kontext an die Funktion binden:
this.saveNextLevelData(this.setAll.bind(this));
Wenn Sie jQuery verwenden, sollten Sie $.proxy
stattdessen die Methode verwenden, da dies bind
nicht in allen Browsern unterstützt wird:
this.saveNextLevelData($.proxy(this.setAll, this));
Das Problem mit "Kontext"
Der Begriff „Kontext“ wird manchmal verwendet , um das Objekt durch referenzierte bezieht dies . Seine Verwendung ist ungeeignet , da sie weder semantisch oder technisch mit passt ECMAScript ist dieser .
"Kontext" bezeichnet die Umstände, die etwas umgeben, das Bedeutung hinzufügt, oder einige vorhergehende und folgende Informationen, die zusätzliche Bedeutung verleihen. Der Begriff "Kontext" wird in ECMAScript verwendet, um sich auf den Ausführungskontext zu beziehen , bei dem es sich um alle Parameter, den Bereich und dies innerhalb des Bereichs eines ausgeführten Codes handelt.
Dies wird in Abschnitt 10.4.2 von ECMA-262 gezeigt :
Setzen Sie die ThisBinding auf den gleichen Wert wie die ThisBinding des aufrufenden Ausführungskontexts
Dies zeigt deutlich, dass dies Teil eines Ausführungskontexts ist.
Ein Ausführungskontext stellt die Umgebungsinformationen bereit, die dem ausgeführten Code Bedeutung verleihen. Es enthält viel mehr Informationen als nur die thisBinding .
Der Wert davon ist also nicht "Kontext", sondern nur ein Teil eines Ausführungskontexts. Es ist im Wesentlichen eine lokale Variable, die durch den Aufruf eines beliebigen Objekts und im strengen Modus auf einen beliebigen Wert gesetzt werden kann.
Sie sollten über "dieses" Schlüsselwort Bescheid wissen.
Meiner Ansicht nach können Sie "dies" auf drei Arten implementieren (Selbst- / Pfeilfunktion / Bindungsmethode)
Dieses Schlüsselwort einer Funktion verhält sich in JavaScript etwas anders als in anderen Sprachen.
Es gibt auch einige Unterschiede zwischen dem strengen Modus und dem nicht strengen Modus.
In den meisten Fällen wird der Wert davon bestimmt, wie eine Funktion aufgerufen wird.
Sie kann während der Ausführung nicht durch Zuweisung festgelegt werden und kann bei jedem Aufruf der Funktion unterschiedlich sein.
ES5 führte die bind () -Methode ein, um den Wert einer Funktion festzulegen, unabhängig davon, wie sie aufgerufen wird.
und ES2015 führten Pfeilfunktionen ein, die diese Bindung nicht selbst bereitstellen (sie behält diesen Wert des einschließenden lexikalischen Kontexts bei).
Methode 1: Selbst - Selbst wird verwendet, um einen Verweis auf das Original beizubehalten, selbst wenn sich der Kontext ändert. Diese Technik wird häufig in Event-Handlern verwendet (insbesondere bei Verschlüssen).
Referenz : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
function MyConstructor(data, transport) {
this.data = data;
var self = this;
transport.on('data', function () {
alert(self.data);
});
}
Methode 2 : Pfeilfunktion - Ein Pfeilfunktionsausdruck ist eine syntaktisch kompakte Alternative zu einem regulären Funktionsausdruck.
obwohl ohne eigene Bindungen an this, Argumente, super oder new.target-Schlüsselwörter.
Pfeilfunktionsausdrücke sind als Methoden ungeeignet und können nicht als Konstruktoren verwendet werden.
Referenz : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
function MyConstructor(data, transport) {
this.data = data;
transport.on('data',()=> {
alert(this.data);
});
}
Methode3 : Bind- Die bind () -Methode erstellt eine neue Funktion, die,
Wenn dieses Schlüsselwort aufgerufen wird, wird es auf den angegebenen Wert gesetzt.
mit einer bestimmten Folge von Argumenten vor allen, die beim Aufruf der neuen Funktion angegeben werden.
Referenz: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind
function MyConstructor(data, transport) {
this.data = data;
transport.on('data',(function() {
alert(this.data);
}).bind(this);
Zunächst müssen Sie ein klares Verständnis scope
und Verhalten von this
Keywords im Kontext von haben scope
.
this
& scope
:
there are two types of scope in javascript. They are :
1) Global Scope
2) Function Scope
Kurz gesagt, der globale Bereich bezieht sich auf das Fensterobjekt. Auf in einem globalen Bereich deklarierte Variablen kann von überall aus zugegriffen werden. Andererseits befindet sich der Funktionsbereich innerhalb einer Funktion. Auf die innerhalb einer Funktion deklarierte Variable kann normalerweise nicht von außerhalb der Welt zugegriffen werden. this
Das Schlüsselwort im globalen Bereich bezieht sich auf das Fensterobjekt. this
Die Funktion inside bezieht sich auch auf das Fensterobjekt. Sie verweist also this
immer auf das Fenster, bis wir einen Manipulationsweg finden this
, um einen Kontext unserer Wahl anzuzeigen.
--------------------------------------------------------------------------------
- -
- Global Scope -
- ( globally "this" refers to window object) -
- -
- function outer_function(callback){ -
- -
- // outer function scope -
- // inside outer function"this" keyword refers to window object - -
- callback() // "this" inside callback also refers window object -
- } -
- -
- function callback_function(){ -
- -
- // function to be passed as callback -
- -
- // here "THIS" refers to window object also -
- -
- } -
- -
- outer_function(callback_function) -
- // invoke with callback -
--------------------------------------------------------------------------------
Verschiedene Möglichkeiten zur Manipulation von this
Rückruffunktionen:
Hier habe ich eine Konstruktorfunktion namens Person. Es hat eine Eigenschaft namens name
und vier Verfahren genannt sayNameVersion1
, sayNameVersion2
, sayNameVersion3
, sayNameVersion4
. Alle vier haben eine bestimmte Aufgabe. Akzeptieren Sie einen Rückruf und rufen Sie ihn auf. Der Rückruf hat eine bestimmte Aufgabe, die darin besteht, die Eigenschaft name einer Instanz der Person-Konstruktorfunktion zu protokollieren.
function Person(name){
this.name = name
this.sayNameVersion1 = function(callback){
callback.bind(this)()
}
this.sayNameVersion2 = function(callback){
callback()
}
this.sayNameVersion3 = function(callback){
callback.call(this)
}
this.sayNameVersion4 = function(callback){
callback.apply(this)
}
}
function niceCallback(){
// function to be used as callback
var parentObject = this
console.log(parentObject)
}
Erstellen wir nun eine Instanz aus dem Personenkonstruktor und rufen verschiedene Versionen der sayNameVersionX
Methode (X bezieht sich auf 1,2,3,4) auf, um niceCallback
zu sehen, auf wie viele Arten wir den this
internen Rückruf bearbeiten können, um auf die person
Instanz zu verweisen .
var p1 = new Person('zami') // create an instance of Person constructor
Mit bind wird eine neue Funktion erstellt, bei der das this
Schlüsselwort auf den angegebenen Wert gesetzt ist.
sayNameVersion1
und sayNameVersion2
verwenden Sie bind, um this
die Rückruffunktion zu manipulieren .
this.sayNameVersion1 = function(callback){
callback.bind(this)()
}
this.sayNameVersion2 = function(callback){
callback()
}
Der erste wird this
mit einem Rückruf innerhalb der Methode selbst gebunden. Der zweite Rückruf wird mit dem daran gebundenen Objekt übergeben.
p1.sayNameVersion1(niceCallback) // pass simply the callback and bind happens inside the sayNameVersion1 method
p1.sayNameVersion2(niceCallback.bind(p1)) // uses bind before passing callback
Die first argument
of- call
Methode wird this
innerhalb der Funktion verwendet, die mit der call
angehängten Funktion aufgerufen wird.
sayNameVersion3
wird verwendet call
, um das zu manipulieren this
, um auf das von uns erstellte Personenobjekt anstelle des Fensterobjekts zu verweisen.
this.sayNameVersion3 = function(callback){
callback.call(this)
}
und es heißt wie folgt:
p1.sayNameVersion3(niceCallback)
Ähnlich wie bezieht sich das call
erste Argument von apply
auf das Objekt, das durch das this
Schlüsselwort angezeigt wird .
sayNameVersion4
wird apply
zum Manipulieren verwendet this
, um auf ein Personenobjekt zu verweisen
this.sayNameVersion4 = function(callback){
callback.apply(this)
}
und es wird wie folgt aufgerufen. Einfach der Rückruf wird übergeben,
p1.sayNameVersion4(niceCallback)
Wir können dies nicht binden setTimeout()
, da es immer mit einem globalen Objekt (Fenster) ausgeführt wird. Wenn Sie this
in der Rückruffunktion auf den Kontext zugreifen möchten, können Sie mit bind()
der Rückruffunktion Folgendes erreichen:
setTimeout(function(){
this.methodName();
}.bind(this), 2000);
Die Frage dreht sich darum, wie sich das this
Schlüsselwort in Javascript verhält. this
verhält sich anders als unten,
- Der Wert von
this
wird normalerweise durch einen Funktionsausführungskontext bestimmt. this
Bezieht sich im globalen Bereich auf das globale Objekt (daswindow
Objekt).- Wenn Strict - Modus für jede Funktion aktiviert ist , wird der Wert
this
sein wirdundefined
als im Strict - Modus bezieht sich global Objektundefined
anstelle deswindow
Objekts. - Das Objekt, das vor dem Punkt steht, ist das, an das dieses Schlüsselwort gebunden wird.
- Wir können den Wert dieses Set explizit mit
call()
,bind()
undapply()
- Wenn das
new
Schlüsselwort (ein Konstruktor) verwendet wird, ist dies an das neu erstellte Objekt gebunden. - Pfeilfunktionen binden nicht
this
- stattdessen werdenthis
sie lexikalisch gebunden (dh basierend auf dem ursprünglichen Kontext)
Wie die meisten Antworten vermuten lassen, können wir die Pfeilfunktion oder die bind()
Methode oder Self var verwenden. Ich würde einen Punkt über Lambdas (Pfeilfunktion) aus dem Google JavaScript Style Guide zitieren
Verwenden Sie lieber Pfeilfunktionen als f.bind (this) und insbesondere goog.bind (f, this). Vermeiden Sie es, const self = this zu schreiben. Pfeilfunktionen sind besonders nützlich für Rückrufe, bei denen manchmal unerwartet zusätzliche Argumente übergeben werden.
Google empfiehlt eindeutig die Verwendung von Lambdas anstelle von Binden oder const self = this
Die beste Lösung wäre also, Lambdas wie folgt zu verwenden:
function MyConstructor(data, transport) {
this.data = data;
transport.on('data', () => {
alert(this.data);
});
}
Verweise:
Derzeit ist ein anderer Ansatz möglich, wenn Klassen im Code verwendet werden.
Mit Unterstützung von Klassenfeldern ist es möglich, den nächsten Weg zu gehen:
class someView {
onSomeInputKeyUp = (event) => {
console.log(this); // this refers to correct value
// ....
someInitMethod() {
//...
someInput.addEventListener('input', this.onSomeInputKeyUp)
Sicherlich ist es unter der Haube alles alte gute Pfeilfunktion, die den Kontext bindet, aber in dieser Form sieht es viel klarer aus als die explizite Bindung.
Da es sich um einen Vorschlag für Stufe 3 handelt, benötigen Sie Babel und ein entsprechendes Babel-Plugin , um es wie bisher zu verarbeiten (08/2018).
Ein anderer Ansatz, der seit DOM2 die Standardmethode zum Binden this
innerhalb des Ereignis-Listeners ist, mit dem Sie den Listener (unter anderem) immer entfernen können, ist die handleEvent(evt)
Methode von der EventListener
Schnittstelle:
var obj = {
handleEvent(e) {
// always true
console.log(this === obj);
}
};
document.body.addEventListener('click', obj);
Detaillierte Informationen zur Verwendung handleEvent
finden Sie hier: https://medium.com/@WebReflection/dom-handleevent-a-cross-platform-standard-since-year-2000-5bf17287fd38
this
in JS:
Der Wert von this
in JS wird zu 100% dadurch bestimmt, wie eine Funktion aufgerufen wird und nicht wie sie definiert wird. Wir können den Wert von relativ leicht this
durch die 'Linke der Punktregel' finden :
- Wenn die Funktion mit dem Funktionsschlüsselwort erstellt wird, ist der Wert von
this
das Objekt links vom Punkt der aufgerufenen Funktion - Wenn vom Punkt kein Objekt mehr vorhanden ist, ist der Wert
this
innerhalb einer Funktion häufig das globale Objekt (global
im Knoten,window
im Browser). Ich würde die Verwendung desthis
Schlüsselworts hier nicht empfehlen, da es weniger explizit ist als die Verwendung von so etwas wiewindow
! - Es gibt bestimmte Konstrukte wie Pfeilfunktionen und Funktionen, die mit der Funktion a erstellt wurden, mit der
Function.prototype.bind()
der Wert von festgelegt werden kannthis
. Dies sind Ausnahmen von der Regel, aber sie sind sehr hilfreich, um den Wert von festzulegenthis
.
Beispiel in nodeJS
module.exports.data = 'module data';
// This outside a function in node refers to module.exports object
console.log(this);
const obj1 = {
data: "obj1 data",
met1: function () {
console.log(this.data);
},
met2: () => {
console.log(this.data);
},
};
const obj2 = {
data: "obj2 data",
test1: function () {
console.log(this.data);
},
test2: function () {
console.log(this.data);
}.bind(obj1),
test3: obj1.met1,
test4: obj1.met2,
};
obj2.test1();
obj2.test2();
obj2.test3();
obj2.test4();
obj1.met1.call(obj2);
Ausgabe:
Lassen Sie sich 1: 1 durch die Ausgänge führen (wobei das erste Protokoll ab dem zweiten ignoriert wird):
this
istobj2
wegen der links vom Punkt Regel können wir sehen , wietest1
genannt wirdobj2.test1();
.obj2
bleibt vom Punkt und damit vomthis
Wert übrig .- Auch wenn
obj2
links vom Punkt,test2
wirdobj1
über diebind()
Methode gebunden . Derthis
Wert ist alsoobj1
. obj2
ist links vom Punkt von der Funktion, die aufgerufen wird :obj2.test3()
. Daherobj2
wird der Wert von seinthis
.- In diesem Fall:
obj2.test4()
obj2
ist links vom Punkt. Pfeilfunktionen haben jedoch keine eigenethis
Bindung. Daher wird es an denthis
Wert des äußeren Bereichsmodule.exports
gebunden, bei dem es sich um ein Objekt handelt, das am Anfang protokolliert wurde. - Wir können den Wert
this
von auch mithilfe dercall
Funktion angeben . Hier können wir den gewünschtenthis
Wert als Argument übergeben, wasobj2
in diesem Fall der Fall ist.
Ich hatte ein Problem mit der Ngx
Liniendiagrammfunktion xAxisTickFormatting
, die aus HTML wie folgt aufgerufen wurde : [xAxisTickFormatting]="xFormat"
. Ich konnte über die deklarierte Funktion nicht auf die Variable meiner Komponente zugreifen. Diese Lösung hat mir geholfen, das Problem zu beheben, um das richtige Problem zu finden. Hoffe das hilft dem Ngx
Liniendiagramm, Benutzer.
anstatt die Funktion wie folgt zu verwenden:
xFormat (value): string {
return value.toString() + this.oneComponentVariable; //gives wrong result
}
Benutze das:
xFormat = (value) => {
// console.log(this);
// now you have access to your component variables
return value + this.oneComponentVariable
}