কলব্যাক ফাংশন সম্পাদন করার সময় কৌণিক 2 উপাদানটির "এটি" অপরিজ্ঞাত হয়

Question 1

আমার কাছে এমন একটি উপাদান রয়েছে যা একটি পরিষেবাকে একটি বিশ্রামের শেষের দিক থেকে ডেটা আনার জন্য কল করে। এই পরিষেবাটিকে কলব্যাক ফাংশন দেওয়া দরকার ডেটা আনার পরে কার্যকর করার জন্য।

সমস্যাটি যখন আমি কলব্যাক ফাংশনটি ব্যবহার করার চেষ্টা করি যখন কোনও উপাদানগুলির ভেরিয়েবলের বিদ্যমান ডেটাতে ডেটা যুক্ত করতে পারি, তখন আমি একটি পাই EXCEPTION: TypeError: Cannot read property 'messages' of undefined। কেনthis ?

প্রকারের স্ক্রিপ্ট সংস্করণ: সংস্করণ 1.8.10

নিয়ামক কোড:

import {Component} from '@angular/core'
import {ApiService} from '...'

@Component({
    ...
})
export class MainComponent {

    private messages: Array<any>;

    constructor(private apiService: ApiService){}

    getMessages(){
        this.apiService.getMessages(gotMessages);
    }

    gotMessages(messagesFromApi){
        messagesFromApi.forEach((m) => {
            this.messages.push(m) // EXCEPTION: TypeError: Cannot read property 'messages' of undefined
        })
    }
}

Question 2

ফাংশন.প্রোটোটাইপ.বাইন্ড ফাংশনটি ব্যবহার করুন :

getMessages() {
    this.apiService.getMessages(this.gotMessages.bind(this));
}

এখানে যা ঘটে তা হ'ল আপনি gotMessagesকলব্যাক হিসাবে পাস করেন , যখন এটি কার্যকর করা হয় তার সুযোগটি আলাদা এবং তাই thisআপনি যা প্রত্যাশা করেছিলেন তা নয়। ফাংশন একটি নতুন ফাংশন যা আবদ্ধ হয় ফেরৎ
bindthis আপনি সংজ্ঞায়িত।

আপনি অবশ্যই সেখানে একটি তীর ফাংশন ব্যবহার করতে পারেন :

getMessages() {
    this.apiService.getMessages(messages => this.gotMessages(messages));
}

আমি পছন্দ bind বাক্য গঠনটি তবে এটি আপনার উপর নির্ভর করে।

তৃতীয় বিকল্পটি যাতে শুরু করার সাথে সাথে পদ্ধতিটি আবদ্ধ করতে হয়:

export class MainComponent {
    getMessages = () => {
        ...
    }
}

বা

export class MainComponent {
    ...

    constructor(private apiService: ApiService) {
        this.getMessages = this.getMessages.bind(this);
    }

    getMessages(){
        this.apiService.getMessages(gotMessages);
    }
}

Question 3

অথবা আপনি এটি এটি করতে পারেন

gotMessages(messagesFromApi){
    let that = this // somebody uses self 
    messagesFromApi.forEach((m) => {
        that.messages.push(m) // or self.messages.push(m) - if you used self
    })
}

Question 4

কারণ আপনি কেবলমাত্র ফাংশন রেফারেন্সটি পাস করছেন getMessagesআপনার সঠিক thisপ্রসঙ্গটি নেই।

আপনি সহজেই একটি ল্যাম্বডা ব্যবহার করে এটি ঠিক করতে পারেন যা thisসেই অজ্ঞাতনীয় ফাংশনের অভ্যন্তরে স্বয়ংক্রিয়ভাবে ব্যবহারের জন্য সঠিক প্রসঙ্গটি আবদ্ধ করে :

getMessages(){
    this.apiService.getMessages((data) => this.gotMessages(data));
}

Question 5

আমার একই সমস্যা রয়েছে, পরিবর্তে () => { function ফাংশন () ব্যবহার করে সমাধান করা হয়েছে

Question 6

ফাংশন সংজ্ঞায়িত করুন

gotMessages = (messagesFromApi) => {
  messagesFromApi.forEach((m) => {
    this.messages.push(m)
  })
}