无法读取属性'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)); 
    }) 
}