無法讀取屬性'propostas_realizadas'undefined - Angular 2

Question

我在Angular 2中有一個應用程序，我試圖在我的控制檯「console.log(this.disputa.propostas_realizadas)」上打印一些數據，但是當我嘗試打印它時，我收到以下消息：

無法讀取的特性「propostas_realizadas」未定義

有趣的（或不那麼有趣）的是我只得到這個消息裏面ngOnInit()，如果我移動代碼到其他功能，將很好地工作但我真的需要這個ngOnInit()

import { Component, OnInit, OnChanges } from '@angular/core'; 
import {Http, Headers} from '@angular/http'; 
import {ActivatedRoute} from '@angular/router'; 
import {DisputaComponent} from '../../disputas/disputas.component'; 
import {DisputaService} from '../../disputas/disputas.service'; 
import {DisputaPropostaService} from './disputas-proposta.service'; 
import {disputaPropostas} from './proposta.interface'; 
import {disputaInterface} from '../disputa.interface'; 
import {Routes, RouterModule, Router} from '@angular/router'; 

@Component({ 
    moduleId: module.id, 
    selector: 'detalhes', 
    templateUrl: `disputas-proposta.component.html`, 
    providers: [DisputaPropostaService] 
}) 

export class DisputaPropostaComponent implements OnInit, OnChanges { 

    disputa: any; 
    inputProposta = false; 
    proposta:disputaPropostas = {proposta_usuario: null, proposta_cliente: null} 

    constructor(private service: DisputaService, private route:ActivatedRoute, 
    private router:Router, private propostaService:DisputaPropostaService){} 

    ngOnInit() : void{ 
     this.route.params.subscribe(params =>{ 
     let id = params['id']; 
     this.service 
     .buscaPorId(id) 
     .subscribe(disputa => { 
      this.disputa = disputa; 
      console.log(disputa); 
     }, 
     erro => console.log(erro)); 
     }) 
     console.log(this.disputa.propostas_realizadas); 
    } 

    ngOnChanges(): void{ 
     console.log("changes");  
    } 

    recusaProposta(){ 
     if (this.disputa.status.status_nome == "Iniciar Negociação"){ 
     this.propostaService.atualizaDisputa(this.disputa) 
      .subscribe(
      res => this.disputa.status.status_nome = "Continuar Negociação", 
      error=> console.log(error) 
     ); 
     } 
     this.inputProposta = true; 
     this.propostaService.atualizaDisputa(this.disputa) 
     .subscribe(
      res => this.disputa.propostas_realizadas++, 
      error => console.log(error) 
     ); 
     if ((this.disputa.propostas_realizadas) == ((this.disputa.maximo_propostas)-1)) 
     alert("Ultima proposta") 
     console.log("recusa", this.disputa.propostas_realizadas) 
    } 

    enviaProposta(){ 
     if ((this.disputa.propostas_realizadas) == (this.disputa.maximo_propostas)) 
      this.router.navigate(['negociacao-concluida/'+this.disputa.id]); 

     if ((this.disputa.propostas_realizadas) == ((this.disputa.maximo_propostas)-1)) 
      alert("Ultima proposta") 

     if (this.disputa.proposta_inicial > this.proposta.proposta_usuario){ 
      alert("Sua proposta não pode ser inferior à oferida pela "); 
      console.log("numero menor"); 
     }else{  
      console.log("numero maior"); 
      this.inputProposta = false; 
      this.propostaService.atualizaDisputa(this.disputa) 
      .subscribe(
       res => this.disputa.propostas_realizadas++, 
       error => console.log(error) 
      ); 
     console.log(this.proposta.proposta_usuario, this.disputa); 
     console.log("envia", this.disputa.propostas_realizadas) 
     } 
    } 
} 

有人可以幫我嗎？在此先感謝:)

Answer 1

你是控制檯日誌記錄響應之前，它已被分配，這是一個異步操作。

ngOnInit() : void{ 
    this.route.params.subscribe(params =>{ 
    let id = params['id']; 
    this.service 
    .buscaPorId(id) 
    .subscribe(disputa => { 
     // executed sometimes later... 
     this.disputa = disputa; 
     console.log(disputa); 
    }, 
    erro => console.log(erro)); 
    }) 
    // executed first 
    console.log(this.disputa.propostas_realizadas); 
} 

注意上述代碼中的註釋。要準備好您的數據，您需要做的是內認購，所以下面應該工作：

ngOnInit() : void{ 
    this.route.params.subscribe(params =>{ 
    let id = params['id']; 
    this.service 
    .buscaPorId(id) 
    .subscribe(disputa => { 
     this.disputa = disputa; 
     console.log(disputa); 
     // here! 
     console.log(this.disputa.propostas_realizadas); 
    }, 
    erro => console.log(erro)); 
    }) 
}