Bir geri arama içinde doğru "buna" nasıl erişilir?

Nov 29 2013

Bir olay işleyicisini kaydeden bir yapıcı işlevim var:

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

Ancak, datageri arama içinde oluşturulan nesnenin özelliğine erişemiyorum . Görünüşe göre thisyaratılan nesneye değil, başka birine atıfta bulunuluyor.

Ayrıca anonim bir işlev yerine bir nesne yöntemi kullanmayı denedim:

function MyConstructor(data, transport) {
    this.data = data;
    transport.on('data', this.alert);
}

MyConstructor.prototype.alert = function() {
    alert(this.name);
};

ama aynı sorunları sergiliyor.

Doğru nesneye nasıl erişebilirim?

Yanıtlar

1910 FelixKling Nov 29 2013 at 13:13

Bilmen gerekenler this

this(aka "bağlam") Her işlev içinde özel bir anahtar kelime ve onun değeri yalnızca bağlıdır nasıl işlevi tanımlandı zaman / nerede değil nasıl /, adlandırıldı. Diğer değişkenler gibi sözlü kapsamlardan etkilenmez (ok fonksiyonları hariç, aşağıya bakınız). İşte bazı örnekler:

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`

Daha fazla bilgi edinmek thisiçin MDN belgelerine göz atın .


Doğru olana nasıl başvurulur this

Ok işlevlerini kullanın

ECMAScript 6 , lambda işlevleri olarak düşünülebilecek ok işlevlerini tanıttı . Kendi thisbağları yok. Bunun yerine, thisnormal bir değişken gibi kapsamda bakılır. Bu, aramanıza gerek olmadığı anlamına gelir .bind. Sahip oldukları tek özel davranış bu değildir, daha fazla bilgi için lütfen MDN belgelerine bakın.

function MyConstructor(data, transport) {
    this.data = data;
    transport.on('data', () => alert(this.data));
}

Kullanma this

Aslında thisözellikle erişmek istemezsiniz , ancak başvurduğu nesneye . Bu yüzden kolay bir çözüm, o nesneye de atıfta bulunan yeni bir değişken yaratmaktır. Değişkenin herhangi bir adı olabilir, ancak yaygın olanlar selfve that.

function MyConstructor(data, transport) {
    this.data = data;
    var self = this;
    transport.on('data', function() {
        alert(self.data);
    });
}

Yana selfnormal bir değişkendir, bu sözcük kapsam kuralları uyar ve geri arama içeride erişilebilir. Bu aynı zamanda thisgeri aramanın değerine erişebilme avantajına da sahiptir .

Geri aramanın açıkça ayarlanması this- bölüm 1

thisDeğeri otomatik olarak ayarlandığı için değeri üzerinde kontrolünüz yokmuş gibi görünebilir , ancak aslında durum böyle değildir.

Her işlev, bir değere bağlı yeni bir işlev döndüren .bind [docs] yöntemine sahiptir this. Fonksiyon, çağırdığınızla tamamen aynı davranışa sahiptir .bind, sadece thissizin tarafınızdan ayarlanmış olan şey. Bu işlev nasıl ve ne zaman çağrılırsa çağrılsın, thisher zaman aktarılan değeri ifade eder.

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

Bu durumda, geri aramaları 's thisdeğerine MyConstructorbağlıyoruz this.

Not: jQuery için bir bağlama bağlamı oluşturduğunuzda, bunun yerine jQuery.proxy [docs] kullanın. Bunu yapmanın nedeni, bir olay geri aramasını çözerken işleve olan başvuruyu depolamanıza gerek kalmamasıdır. jQuery bunu dahili olarak halleder.

thisGeri arama seti - 2. bölüm

Geri aramaları kabul eden bazı işlevler / yöntemler, geri aramaların thisbaşvurması gereken bir değeri de kabul eder. Bu temelde onu kendiniz bağlamakla aynıdır, ancak işlev / yöntem bunu sizin için yapar. Array#map [docs] böyle bir yöntemdir. İmzası:

array.map(callback[, thisArg])

İlk argüman geri çağırmadır ve ikinci argüman thisbaşvurması gereken değerdir . İşte uydurma bir örnek:

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

Not: için bir değer thisiletip iletemeyeceğiniz genellikle o işlevin / yöntemin belgelerinde belirtilir. Örneğin, jQuery'nin $.ajaxyöntemi [docs] , şu adı verilen bir seçeneği açıklar context:

Bu nesne, Ajax ile ilgili tüm geri aramaların bağlamı haline getirilecektir.


Yaygın sorun: Nesne yöntemlerini geri çağırmalar / olay işleyicileri olarak kullanma

Bu sorunun diğer bir yaygın tezahürü, bir nesne yönteminin geri çağırma / olay işleyicisi olarak kullanılmasıdır. Fonksiyonlar, JavaScript'in birinci sınıf vatandaşlarıdır ve "yöntem" terimi, bir nesne özelliğinin değeri olan bir fonksiyon için yalnızca konuşma dilinde kullanılan bir terimdir. Ancak bu işlevin "içeren" nesnesine belirli bir bağlantısı yoktur.

Aşağıdaki örneği düşünün:

function Foo() {
    this.data = 42,
    document.body.onclick = this.method;
}

Foo.prototype.method = function() {
    console.log(this.data);
};

Fonksiyon this.methodtıklama olay işleyicisi olarak atanan, ancak eğer bir document.bodytıklandığında, değeri olacaktır günlüğe undefinedolay işleyicisi içinde, çünkü thisatıfta document.bodyarasında değil, örneğin Foo.
Başlangıçta daha önce bahsedildiği gibi, neyin thisifade edildiği işlevin nasıl tanımlandığına değil, nasıl çağrıldığına bağlıdır . Kod aşağıdaki gibiyse, işlevin nesneye örtük bir başvurusu olmadığı daha açık olabilir:

function method() {
    console.log(this.data);
}


function Foo() {
    this.data = 42,
    document.body.onclick = this.method;
}

Foo.prototype.method = method;

Çözüm , yukarıda belirtilenle aynıdır: Varsa, belirli bir değere .bindaçıkça bağlanmak thisiçin kullanın

document.body.onclick = this.method.bind(this);

veya anonim bir işlevi geri çağırma / olay işleyicisi olarak kullanarak ve nesneyi ( this) başka bir değişkene atayarak, işlevi nesnenin bir "yöntemi" olarak açıkça çağırın :

var self = this;
document.body.onclick = function() {
    self.method();
};

veya bir ok işlevi kullanın:

document.body.onclick = () => this.method();
225 MohanDere Aug 13 2016 at 17:26

Alt bağlamda üst içeriğe erişmenin birkaç yolu:

  1. bind()İşlevi kullanabilirsiniz .
  2. Bağlama referansı / bunu başka bir değişkenin içinde saklayın (aşağıdaki örneğe bakın).
  3. ES6 Ok işlevlerini kullanın .
  4. Kod / işlev tasarımını / mimarisini değiştirin - bunun için javascript'teki tasarım kalıpları üzerinde komuta sahip olmalısınız .

1. bind()işlevi kullanın

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

underscore.js- http://underscorejs.org/#bind kullanıyorsanız

transport.on('data', _.bind(function () {
    alert(this.data);
}, this));

2 Bağlama referans / bunu başka bir değişkenin içinde saklayın

function MyConstructor(data, transport) {
  var self = this;
  this.data = data;
  transport.on('data', function() {
    alert(self.data);
  });
}

3 Ok işlevi

function MyConstructor(data, transport) {
  this.data = data;
  transport.on('data', () => {
    alert(this.data);
  });
}
59 Guffa May 21 2014 at 07:11

Hepsi bir yöntemi çağırmanın "sihirli" sözdiziminde:

object.property();

Nesneden özelliği aldığınızda ve bir seferde çağırdığınızda, nesne yöntemin bağlamı olacaktır. Aynı yöntemi, ancak ayrı adımlarda çağırırsanız, bağlam bunun yerine genel kapsamdır (pencere):

var f = object.property;
f();

Bir yöntemin referansını aldığınızda, artık nesneye eklenmez, yalnızca düz bir işleve referanstır. Geri arama olarak kullanılacak referansı aldığınızda da aynısı olur:

this.saveNextLevelData(this.setAll);

Bağlamı işleve bağlayacağınız yer burasıdır:

this.saveNextLevelData(this.setAll.bind(this));

JQuery kullanıyorsanız, tüm tarayıcılarda desteklenmediği için $.proxybunun yerine yöntemi kullanmalısınız bind:

this.saveNextLevelData($.proxy(this.setAll, this));
34 RobG Jun 01 2014 at 07:44

"Bağlam" ile ilgili sorun

"Bağlam" terimi bazen tarafından başvurulan nesne başvurmak için kullanılır bu . Onunla semantik veya teknik ya uymuyor çünkü Onun kullanılması uygun değildir ECMAScript en bu .

"Bağlam" , anlam katan bir şeyi çevreleyen koşullar veya fazladan anlam veren bazı önceki ve sonraki bilgiler anlamına gelir. "Bağlam" terimi, ECMAScript'te , tüm parametreler, kapsam ve bu , bazı yürütme kodlarının kapsamındaki yürütme bağlamına atıfta bulunmak için kullanılır .

Bu, ECMA-262 bölüm 10.4.2'de gösterilmektedir :

ThisBinding'i çağıran yürütme bağlamının ThisBindingiyle aynı değere ayarlayın

Bu , bunun bir yürütme bağlamının parçası olduğunu açıkça gösterir .

Bir yürütme bağlamı, yürütülmekte olan koda anlam katan çevreleyen bilgileri sağlar. Yalnızca thisBinding'den çok daha fazla bilgi içerir .

Değeri Yani bu "bağlam" değil, bir yürütme içeriği sadece bir parçası. Esasen herhangi bir nesneye yapılan çağrı ile ve katı modda herhangi bir değere ayarlanabilen yerel bir değişkendir.

32 Ashish Jan 30 2019 at 18:01

"Bu" Anahtar Kelimeyi bilmelisiniz.

Benim görüşüme göre "bunu" üç şekilde uygulayabilirsiniz (Self / Arrow function / Bind Method)

Bir işlevin this anahtar sözcüğü JavaScript'te diğer dillere kıyasla biraz farklı davranır.

Katı mod ile katı olmayan mod arasında da bazı farklılıklar vardır.

Çoğu durumda, bunun değeri bir fonksiyonun nasıl çağrıldığına göre belirlenir.

Yürütme sırasında atama ile ayarlanamaz ve işlev her çağrıldığında farklı olabilir.

ES5, nasıl çağrıldığına bakılmaksızın bir işlevin değerini ayarlamak için bind () yöntemini tanıttı.

ve ES2015, kendisine ait bu bağlamayı sağlamayan ok işlevlerini tanıttı (çevreleyen sözcüksel bağlamın bu değerini korur).

Yöntem 1: Öz - Benlik, bağlam değişirken bile orijinaline bir referansı sürdürmek için kullanılıyor. Genellikle olay işleyicilerinde (özellikle kapanışlarda) kullanılan bir tekniktir.

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

Yöntem2 : Ok işlevi - Ok işlevi ifadesi, normal işlev ifadesine sözdizimsel olarak kompakt bir alternatiftir,

buna, argümanlara, süper veya new.target anahtar kelimelerine kendi bağlantıları olmasa da.

Ok işlevi ifadeleri yöntem olarak uygun değildir ve yapıcılar olarak kullanılamazlar.

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

Method3 : Bind- bind () yöntemi,

çağrıldığında, bu anahtar kelimesi sağlanan değere ayarlanır,

yeni işlev çağrıldığında sağlanan herhangi bir argüman dizisi ile.

Referans: 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);
26 AL-zami Aug 19 2017 at 00:58

Öncelikle, bağlamında anahtar kelime hakkında net bir anlayışa scopeve davranışa sahip olmanız gerekir .thisscope

this& scope:


there are two types of scope in javascript. They are :

   1) Global Scope

   2) Function Scope

kısaca global kapsam pencere nesnesini ifade eder, global kapsamda bildirilen değişkenlere her yerden erişilebilir, diğer yandan işlev kapsamı bir işlevin içinde bulunur. bir işlev içinde belirtilen değişken normal olarak dış dünyadan erişilemez. thisgenel kapsamdaki anahtar kelime, pencere nesnesini ifade eder. thisinside işlevi aynı zamanda pencere nesnesine de atıfta bulunur.Bu thisnedenle this, kendi seçtiğimiz bir bağlamı belirtmek için manipüle etmenin bir yolunu bulana kadar her zaman pencereye başvuracağız .

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

thisGeri arama işlevlerinin içinde işlem yapmanın farklı yolları :

Burada Kişi adında bir yapıcı işlevim var. Bu adlandırılan özelliği vardır nameve adı verilen dört yöntem sayNameVersion1, sayNameVersion2, sayNameVersion3, sayNameVersion4. Dördünün de belirli bir görevi vardır.Bir geri aramayı kabul edin ve çağırın. Geri aramanın, Person yapıcı işlevinin bir örneğinin name özelliğini günlüğe kaydetmek olan belirli bir görevi vardır.

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)

}

Şimdi kişi yapıcısından bir örnek oluşturalım ve örneğe başvurmak için içerideki geri çağrıyı kaç yoldan değiştirebileceğimizi görmek sayNameVersionXiçin (X, 1,2,3,4) yönteminin farklı sürümlerini çağıralım .niceCallbackthisperson

var p1 = new Person('zami') // create an instance of Person constructor

bağla:

Bağlamanın yapılması gereken, thisanahtar kelime sağlanan değere ayarlanmış yeni bir işlev oluşturmaktır .

sayNameVersion1ve geri arama işlevini sayNameVersion2işlemek için bind kullanın this.

this.sayNameVersion1 = function(callback){
    callback.bind(this)()
}
this.sayNameVersion2 = function(callback){
    callback()
}

birincisi this, yöntemin kendi içinde geri arama ile bağlanır ve ikincisi için, ona bağlı nesne ile geri arama iletilir.

p1.sayNameVersion1(niceCallback) // pass simply the callback and bind happens inside the sayNameVersion1 method

p1.sayNameVersion2(niceCallback.bind(p1)) // uses bind before passing callback

aramak :

first argumentBir callyöntem olarak kullanılmaktadır thisçağrılır işlevi içinde call, kendisine bağlı.

sayNameVersion3pencere nesnesi yerine oluşturduğumuz kişi nesnesine başvurmak calliçin işlemek için kullanır this.

this.sayNameVersion3 = function(callback){
    callback.call(this)
}

ve şu şekilde adlandırılır:

p1.sayNameVersion3(niceCallback)

uygulamak :

Benzer şekilde call, ilk argümanı anahtar sözcükle applygösterilecek nesneyi ifade eder this.

sayNameVersion4kişi nesnesine başvurmak applyiçin manipüle thisetmek için kullanır

this.sayNameVersion4 = function(callback){
    callback.apply(this)
}

ve aşağıdaki gibi çağrılır. Basitçe geri arama geçilir,

p1.sayNameVersion4(niceCallback)
20 DattaChanewad Nov 17 2017 at 21:32

Her setTimeout()zaman global nesne (Pencere) ilethis yürütüldüğü için, geri çağırma işlevindeki bağlama erişmek istiyorsanız , geri arama işlevini kullanarak bind()şu şekilde başarabileceğimizi bağlayamayız:

setTimeout(function(){
    this.methodName();
}.bind(this), 2000);
13 Code_Mode Feb 18 2019 at 16:10

Soru, thisanahtar kelimenin javascript'te nasıl davrandığı etrafında döner . thisaşağıdaki gibi farklı davranır,

  1. Değeri thisgenellikle bir işlev yürütme bağlamı tarafından belirlenir.
  2. Global kapsamda, thisglobal nesneyi ( windownesne) ifade eder .
  3. Katı mod herhangi bir işlev için etkinse sonra değeri thisolacaktır undefinedKatı modda olduğu gibi, küresel nesne anlamına gelir undefinedyerine windownesne.
  4. Noktanın önünde duran nesne, bu anahtar kelimenin bağlı olacağı şeydir.
  5. Biz birlikte bunu açıkça değerini ayarlayabilirsiniz call(), bind()veapply()
  6. Ne zaman newanahtar kelime (bir yapıcı) kullanılır, bu yeni nesne oluşturulan bağlıdır.
  7. Ok İşlevleri bağlanmaz this - bunun yerine thissözcüksel olarak bağlanır (yani orijinal bağlama göre)

Yanıtların çoğunun önerdiği gibi, Ok işlevini veya bind()Yöntem veya Öz var. Google JavaScript Stil Kılavuzu'ndan lambdalar (Ok işlevi) hakkında bir alıntı yapacağım

Ok işlevlerini f.bind (this) yerine ve özellikle goog.bind (f, this) yerine kullanmayı tercih edin. Const self = this yazmaktan kaçının. Ok işlevleri, bazen beklenmedik şekilde ek bağımsız değişkenler ileten geri aramalar için özellikle yararlıdır.

Google, bağlamak yerine lambdaların kullanılmasını açıkça önerir veya const self = this

Bu yüzden en iyi çözüm lambdaları aşağıdaki gibi kullanmak olacaktır,

function MyConstructor(data, transport) {
  this.data = data;
  transport.on('data', () => {
    alert(this.data);
  });
}

Referanslar:

  1. https://medium.com/tech-tajawal/javascript-this-4-rules-7354abdb274c
  2. arrow-functions-vs-bind
8 skyboyer Sep 22 2018 at 20:38

Şu anda, kodda sınıflar kullanılıyorsa başka bir yaklaşım mümkündür.

Sınıf alanlarının desteğiyle bunu bir sonraki yolla yapmak mümkündür:

class someView {
    onSomeInputKeyUp = (event) => {
        console.log(this); // this refers to correct value
    // ....
    someInitMethod() {
        //...
        someInput.addEventListener('input', this.onSomeInputKeyUp)

Elbette, kaputun altında, bağlamı bağlayan tüm eski iyi ok işlevi vardır, ancak bu formda, bu açık bağlama çok daha açık görünür.

Aşama 3 Teklifi olduğundan , şimdilik olduğu gibi işlemek için babel ve uygun babel eklentisine ihtiyacınız olacak (08/2018).

5 AndreaPuddu Aug 28 2018 at 16:10

DOM2'ninthis olay dinleyicisi içinde bağlanmasından bu yana standart yol olan, dinleyiciyi her zaman kaldırmanıza izin veren (diğer faydaların yanı sıra) başka bir yaklaşım, arayüzden handleEvent(evt)yöntemdir EventListener:

var obj = {
  handleEvent(e) {
    // always true
    console.log(this === obj);
  }
};

document.body.addEventListener('click', obj);

Kullanmayla ilgili ayrıntılı bilgi handleEventburada bulunabilir: https://medium.com/@WebReflection/dom-handleevent-a-cross-platform-standard-since-year-2000-5bf17287fd38

2 WillemvanderVeen May 05 2020 at 15:48

this JS'de:

thisJS'deki değeri % 100 bir işlevin nasıl tanımlandığına değil, nasıl çağrıldığına göre belirlenir. Biz nispeten kolayca değerini bulabilirsiniz thistarafından 'nokta kuralının sol' :

  1. İşlev, function anahtar sözcüğü kullanılarak oluşturulduğunda, değeri this, çağrılan işlevin noktasının solundaki nesnedir.
  2. Noktanın solunda nesne yoksa, thisbir işlevin içindeki değer genellikle genel nesnedir ( globaldüğümde, windowtarayıcıda). thisAnahtar kelimeyi burada kullanmanızı tavsiye etmem çünkü böyle bir şey kullanmaktan daha az açık ve nettir window!
  3. Function.prototype.bind()Değerini sabitleyebilen bir işlev kullanılarak oluşturulan ok işlevleri ve işlevler gibi belirli yapılar vardır this. Bunlar kuralın istisnalarıdır ancak değerini düzeltmek için gerçekten faydalıdır this.

NodeJS'deki örnek

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

Çıktı:

Çıktıları 1'e 1 boyunca göstermeme izin verin (ikinciden başlayarak ilk günlüğü yok sayarak):

  1. thisolduğu obj2, çünkü nokta kuralı solun, biz nasıl görebilirsiniz test1denir obj2.test1();. obj2noktanın solunda ve dolayısıyla thisdeğerdir.
  2. Olsa obj2Noktanın bırakılır, test2bağlı olduğu obj1aracılığı bind()yöntemle. Yani thisdeğer obj1.
  3. obj2: adı verilen işlevin noktasının solundadır obj2.test3(). Bu nedenle obj2değeri olacaktır this.
  4. Bu durumda: obj2.test4() obj2noktanın soludur. Ancak, ok işlevlerinin kendi thisbağlantıları yoktur. Bu nedenle , başlangıçta günlüğe kaydedilen bir nesne olan thisdış kapsamın değerine bağlanacaktır module.exports.
  5. Fonksiyonu thiskullanarak değerini de belirtebiliriz call. Burada thisargüman olarak istenen değeri iletebiliriz obj2, bu durumda budur.
1 Md.TazbirUrRahmanBhuiyan Oct 12 2020 at 23:07

Ben sorunu bakıyordu Ngxçizgi grafiği xAxisTickFormattingHTML'den böyle denirdi fonksiyonu: [xAxisTickFormatting]="xFormat". Bileşenimin değişkenine bildirilen işlevden erişemedim. Bu çözüm, doğru olanı bulmak için sorunu çözmeme yardımcı oldu. Umarım bu Ngxçizgi grafiğe, kullanıcılara yardımcı olur .

işlevi şu şekilde kullanmak yerine:

xFormat (value): string {
  return value.toString() + this.oneComponentVariable; //gives wrong result 
}

Bunu kullan:

 xFormat = (value) => {
   // console.log(this);
   // now you have access to your component variables
   return value + this.oneComponentVariable
 }