无法读取未定义的属性'propostas_realizadas' - Angular 2 [英] Cannot read property 'propostas_realizadas' of undefined - Angular 2

问题描述

我在Angular 2中有一个应用程序，我试图在我的控制台上打印一些数据 console.log（this.disputa.propostas_realizadas），但是当我尝试打印时，我收到此消息：

I have an application in Angular 2 in which I'm trying to print some data on my console "console.log(this.disputa.propostas_realizadas)", however when I try to print it I get this message:

无法读取属性'propostas_realizadas'未定义

Cannot read property 'propostas_realizadas' of undefined

有趣（或不那么有趣）的事情是我只在 ngOnInit（）中收到此消息，如果我移动其他功能的代码将完美地工作但我真的需要在 ngOnInit（）

The funny (or not so funny) thing is I only get this message inside ngOnInit(), if I move the code to other function it will work perfectly but I really need this inside 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)
      }
   }
}

有人能帮帮我吗？在此先感谢：）

Can someone help me? Thanks in advance :)

推荐答案

您是控制台在分配响应之前记录响应，这是异步操作。

You are console logging the response before it has been assigned, this is an async operation.

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

请注意上述代码中的注释。要使您的数据可用，您需要在订阅中执行此操作，因此以下内容应该有效：

Notice the comments in above code. To have your data available, you need to do it inside the subscription, so the following should work:

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

这篇关于无法读取未定义的属性'propostas_realizadas' - Angular 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！