angular - Efter att ha fyllt objektet vill jag använda fälten för att få data till ett annat objekt

Jag har fyllt i mitt objekt Contract och när jag använder debuggern kan jag se att objektet har fyllts i. Men senare, när jag vill använda objektets fält, är det odefinierat. Jag förstår inte varför detta är fallet. Här är raden i fråga där contract är odefinierat.

console.log("test id contract client" + this.contract.contractId);

Och här är min fullständiga kod

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Client } from '../../models/client';
import { Contract } from '../../models/Contract';
import { ClientService } from '../../services/client.service';
import { ContractService } from '../../services/contract.service';

@Component({
  selector: 'app-contract-customer',
  templateUrl: './contract-customer.component.html',
  styleUrls: ['./contract-customer.component.css']
})
export class ContractCustomerComponent implements OnInit {
  public contractNumber: string;
  public client: Client;
  public contract: Contract;

  constructor(private route: ActivatedRoute, private clientService: ClientService, private contractService: ContractService) { }


  ngOnInit():void  {
    // First get the contract id from the current route.
    const url = window.location.href;
    var parts = url.split('/', 6);

    this.contractNumber = parts[4];

    console.log("Contract Id form url : " + this.contractNumber);

    this.GetContractClient();

  }


  GetContract(id: string) {
    this.contractService.getContract(Number(id)).subscribe(result => {
      this.contract = result;
    }, error => {
      console.log(error)
    });
  }

  GetContractClient() {
    this.GetContract(this.contractNumber);

    console.log("test id contract client" + this.contract.contractId);

    this.clientService.getClient(this.contract.contractId).subscribe(result => {
      this.client = result;
    }, error => {
      console.log('something wrong here!!!')
        console.log(error)
    });
    }
}

Svar #1

I ngOnInit() kallar du this.GetContractClient()

DÅ

I GetContractClient kallar du this.GetContract(this.contractNumber)

Koden i GetContract är asynkron kod. Detta betyder att den inte körs omedelbart. Till exempel, om jag sa "Jag gör en kopp kaffe" händer det inte på en gång. Det tar ett tag för vattenkokaren att koka. Samma sak gäller asynkron kod. Du har inte lämnat information om vad din tjänst gör, men jag antar att den gör ett HTTP-anrop till din server. Detta tar tid. Denna asynkrona kod börjar köras, men resten av koden väntar inte på att den ska slutföra körningen. Den fortsätter. Därför är koden:

console.log("test id contract client" + this.contract.contractId);

Verkställer nästa.

Men prenumerationsblocket här har ännu inte körts. DET KÖRS FÖRST NÄR HTTP-ANROPET ÄR KLART.

this.contractService.getContract(Number(id)).subscribe(result => {
  // IMPORTANT: THIS LINE ONLY EXECUTES WHEN THE HTTP CALL COMPLETES
  this.contract = result;
}, error => {
  console.log(error)
});

Så koden this.contract=result har ännu inte körts, vilket är anledningen till att contract är odefinierad på denna rad:

console.log("test id contract client" + this.contract.contractId);

För att fixa det, gör så här:

this.contractService.getContract(Number(id)).subscribe(result => {
  // IMPORTANT: THIS LINE ONLY EXECUTES WHEN THE HTTP CALL COMPLETES
  this.contract = result;
  console.log("test id contract client" + this.contract.contractId);
}, error => {
  console.log(error)
});

Hoppas det hjälper dig att förstå asynkron kod.