Nedefinovaná globálna premenná, ale zobrazujúca sa z pohľadu Angular 2 - html, angular, strojopis

Som zmätený s mojimi kódmi v Angular 2. V mojom ts súbor Mám:

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

A vo svojom súbore HTML mám:

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

Iste, viazanosť údajov {{ test?.title }} pracuje a zobrazuje údaje. Ale počas volania inej funkcie getJob(this.test.id) na mojom ts súbor, hovorí o nedefinovanom parametri. Ako sa to stalo nedefinovaným, keď sa zobrazuje perfektne v zornom poli? Chcel som použiť dáta vo vnútri this.test premenná na iné funkcie, ale nemôžem, pretože je nedefinovaná. Prosím, niekto má so mnou rovnaký problém a ako ste tento problém vyriešili. Ďakujem.

odpovede:

Je to preto, že console.log() je vykonaná predtým this.test dostane pridelenú hodnotu. Spustenie je asynchronné, čo znamená, že je naplánované jeho spustenie neskôr, zatiaľ čo vykonávanie synchronizačného kódu pokračuje okamžite.

{{ test?.title }} je undefined najskôr aktualizovaná neskôr, ale zmena prebehne príliš rýchlo na to, aby ju človek poznal.

Ak presuniete console.log() uvidíte hodnotu

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

aktualizovať

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

Nahraďte kód týmto:

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

Práve ste vložili console.log() na zlom mieste.

ako this.testService.getById(40).subscribe je asynchronna cast, tak

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