Set value to input

Question

Set value to input

Navigation

#1 by (1 votes)

1

I am working with Angular2 and I have a simple form:

<div class='col-12'>
      <div class="form-group">
             <label class="form-control-label" for="nombre">Nombre</label>
             <input class="form-control input-md" placeholder="Ingresar nombre identificador de la Lista" #nombre="ngModel" required id="nombre" name="nombre" type="text" [(ngModel)]="lista.nombre">
             <small class="form-text text-muted danger" *ngIf="send && lista.nombre === ''">Debe ingresar un nombre para la Lista de Chequeo</small>
      </div>
</div>

In the component I have an object of type Lista

export class ListaChequeoEditComponent implements OnInit {
    title = 'Lista de Chequeo';
    lista: Lista;
    id_lista: any;

    constructor(private router: Router,
        private route: ActivatedRoute, private formDataService: FormDataService,
        private workflowService: WorkflowService, public partidaService: PartidasServiceService, public ubicacionService: UbicacionService,
        public listaService: ListaService) {
    }

    obtenerLista(){
        this.route.queryParams.subscribe(params => {
            this.id_lista = params["id_lista"];
            this.listaService.getLista({id_lista: this.id_lista}).subscribe(
            result => {
                var objLista = new Lista(
                    result[0].nombre
                );
                this.lista = objLista;

            }, error => {
                this.loading = false;
                console.log(error);
            });
        });
    }

    ngOnInit() {
        this.obtenerLista();
    }
}

Model:

export class Lista {
    nombre: string = '';

    constructor(nombre: string){
        this.nombre = nombre;
    }
}

I get the values of an object from the call to an api and try to set them:

this.lista.nombre = 'Nuevo Nombre';

But I get the error

ERROR TypeError: Can not read property 'name' of undefined

EDITING

Implement Pablo's solution, but it still does not work.

Builder:

constructor(private router: Router,
    private route: ActivatedRoute, private formDataService: FormDataService,
    private workflowService: WorkflowService, public partidaService: PartidasServiceService, public ubicacionService: UbicacionService,
    public listaService: ListaService) {
        this.lista = new Lista();
}

ngOnInit

ngOnInit() {
    this.obtenerLista();
}

obtenerLista(){
    this.route.queryParams.subscribe(params => {
        this.id_lista = params["id_lista"];
        this.listaService.getLista({id_lista: this.id_lista}).subscribe(
        result => {
            var objLista = new Lista();
            objLista.nombre = result[0].nombre
            this.lista = objLista;
            console.log(this.lista);

        }, error => {
            this.loading = false;
            console.log(error);
        });
    });
}

The value of this.lista if it is updated, I check it by printing, but in the DOM the data is not updated.

angular

asked by sioesi 05.06.2018 в 18:30

source

1 answer

Query a value in the firebase realtime database Android: SQLiteDatabase can not resolve symbol

score 1 · Accepted Answer

You should initialize the tax of your lista component: Since its value is obtained by an asynchronous call, until it is not completed the list value will be undefined . This makes the first time the view is generated the value of your input can not be assigned because when trying to access this.lista.nombre the error occurs:

export class ListaChequeoEditComponent implements OnInit {
    title = 'Lista de Chequeo';
    lista: Lista;
    id_lista: any;

    constructor(private router: Router,
        private route: ActivatedRoute,
        private formDataService: FormDataService,
        private workflowService: WorkflowService,
        public partidaService: PartidasServiceService,
        public ubicacionService: UbicacionService,
        public listaService: ListaService) {

        this.lista= new Lista('');
    }

    ...
}