अपरिभाषित वैश्विक चर लेकिन कोणीय 2 - html, कोणीय, टाइपस्क्रिप्ट को देखते हुए

मैं कोणीय 2. में अपने कोड के साथ भ्रमित हूँ ts फ़ाइल मेरे पास है:

    import { Test } from "../../../../models/test";
import { TestService } from "../../../../services/test.service";
import { Job} from "../../../../models/job";
import { JobService } from "../../../../services/job.service";

export class TestTakeMcComponent implements OnInit {
company_name: string;
test: Test;
job: Job;

constructor(
private testService: TestService,
private jobService: JobService
) { }
ngOnInit() {
this.getTest();
this.getJob(this.test.id);
}
getTest(){
this.testService.getById(40).subscribe(
test => {
if(test.data.data.length != 0){
this.test = test.data.data[0];
}
}
);
}
getJob(id: number){
this.jobService.getJobByTestId(id).subscribe();
}
}

और मेरी HTML फ़ाइल में मेरे पास है:

<h3 class="box-title">{{ test?.title }} </h3>

निश्चित रूप से, डेटा बाध्यकारी {{ test?.title }} काम कर रहा है और डेटा दिखा रहा है। लेकिन एक अन्य फ़ंक्शन के कॉल के दौरान getJob(this.test.id) मुझ पर ts फ़ाइल, यह एक अपरिभाषित पैरामीटर कहती है। जब यह पूरी तरह से दृश्य में दिखाई दे रहा है तो यह अपरिभाषित कैसे हो गया? मैं अंदर डेटा का उपयोग करना चाहता था this.test अन्य कार्यों के लिए चर लेकिन मैं इसे अपरिभाषित नहीं कर सकता। कृपया किसी के पास मेरे साथ एक ही मुद्दा है और आपने इस समस्या को कैसे ठीक किया। धन्यवाद।

उत्तर:

इस वजह से console.log() पहले निष्पादित किया जाता है this.test एक मान दिया जाता है। निष्पादन असिंस्क है, जिसका अर्थ है कि यह बाद में चलने वाला है, जबकि सिंक कोड का निष्पादन तुरंत जारी है।

{{ test?.title }} है undefined पहले लेकिन बाद में अपडेट किया गया, लेकिन परिवर्तन बहुत तेजी से होता है एक इंसान के लिए भी।

अगर आप हिलते हैं console.log() आप "मान देखेंगे

      getTest(){
this.testService.getById(40).subscribe(
test => {
if(test.data.data.length != 0){
this.test = test.data.data[0];
console.log(this.test);
}
}
);
}

अद्यतन करें

export class TestTakeMcComponent implements OnInit {
company_name: string;
test: Test;
job: Job;

constructor(
private testService: TestService,
private jobService: JobService
) { }
ngOnInit() {
this.getTest().subscribe(val =>
this.getJob(this.test.id));
}
getTest(){
// add `return` and replace `subscribe` by `map`
return this.testService.getById(40).map(
test => {
if(test.data.data.length != 0){
this.test = test.data.data[0];
}
}
);
}
getJob(id: number){
this.jobService.getJobByTestId(id).subscribe();
}
}

इसके साथ आपको कोड बदलें:

import { Test } from "../../../../models/test";
import { TestService } from "../../../../services/test.service";

export class TestTakeMcComponent implements OnInit {
company_name: string;
test: Test;

constructor(
private testService: TestService
) { }
ngOnInit() {
this.getTest();
// console.log(this.test);
}
getTest(){
this.testService.getById(40).subscribe(
test => {
if(test.data.data.length != 0){
this.test = test.data.data[0];
console.log(this.test);
this.getJob();
}
}
);
}

getJob(){
this.jobService.getJobByTestId(this.test.id).subscribe();
}
}

आपने अभी डाला है console.log() गलत जगह पर।

जैसा this.testService.getById(40).subscribe async हिस्सा है, इसलिए

ngOnInit() {
this.getTest();
// at this time we"ll not have this.test ;
// console.log(this.test);
}