Angular 2 Data Binding (cannot read property 'proposta_usuario' of undefined)

问题

I'm trying to bind a data from input on Angular 2 but I'm having some problems.

Here is the html code:

    <input type="text" class="animated bounceIn input-proposta" 
        placeholder="Insira sua proposta" [(ngModel)]="proposta.proposta_usuario" >

<input type="button" (click)="enviaProposta(proposta)" class="botao-medio btn-aceita" value="Enviar Proposta" >

and here's the component (I have created a interface for "proposta" in which I have two properties: 'proposta_usuario' and 'proposta_cliente')

import { Component } 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 {disputaPropostas} from './proposta.interface';

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

export class DetalhesNegociacaoComponent  {


    disputa: DisputaComponent;
    service: DisputaService;
    route: ActivatedRoute;
    inputProposta = false;
    proposta:disputaPropostas;

    //constructor and other functions


      enviaProposta(proposta:any){
        this.inputProposta = false;
        console.log(this.proposta.proposta_usuario);
     }

I just want to show the value from the input on my console.log, but I'm getting this error

Cannot read property 'proposta_usuario' of undefined

Thanks in advance

回答1:

you need to instantiate proposta property,

proposta :disputaPropostas = { proposta_usuario : "", proposta_cliente: "" }

Hope this helps!!

回答2:

You have to define proposta in your component. For example:

    ngOnInit(){
    this.proposta = new disputaPropostas();
}

回答3:

it beacause in your code you simply define proposta to be a type of your interface disputaPropostas. But you need to instanciate it.

来源：https://stackoverflow.com/questions/42581691/angular-2-data-binding-cannot-read-property-proposta-usuario-of-undefined

标签

angular

data-binding

angular2-forms