I lose the value in Angular5

Question

I lose the value in Angular5

Navigation

#1 by (1 votes)
#2 by (-1 votes)

1

I have an Array that collects a list. If I do a console.log (this); I can see the array with the elements in the console.

But if I do the console.log(this.People); it tells me it's undefined.

import { Component, OnInit,Input } from '@angular/core';

import { ActivatedRoute } from '@angular/router';

import { Person } from '../class/personClass';
import { ConexionPersonService } from '../conexion-person.service';

@Component({
    selector: 'app-detail-user',
    templateUrl: './detail-user.component.html',
    styleUrls: ['./detail-user.component.css']
})
export class DetailUserComponent implements OnInit {

    detailPerson: Person;
    People:Person[];
    @Input() id;


    constructor(
        private route: ActivatedRoute,
        private conexion: ConexionPersonService) { }

    ngOnInit() {
        this.id = +this.route.snapshot.paramMap.get('id');
        this.getPeople();
        this.getPerson();
    }

    getPeople(): void {
        //Aquí obtengo el array de People
        this.conexion.getPeople()
            .subscribe(People => this.People = People);
    }

    getPerson(): void {
        console.log ( "this en getPerson" , this); //Aquí se ven los datos
        console.log ( "persona en getPerson" , this.People); //Ya no
        console.log ( "id en getPerson" , this.id);
         this.detailPerson = this.conexion.getPerson(this.People,this.id);

     }

}

angular

asked by EduBw 10.04.2018 в 16:26

source

2 answers

-1

You call this.getPerson() too fast, before the call to this.getPeople() has been resolved.

Your code should be like this:

@Component({
    selector: 'app-detail-user',
    templateUrl: './detail-user.component.html',
    styleUrls: ['./detail-user.component.css']
})
export class DetailUserComponent implements OnInit {

    detailPerson: Person;
    People:Person[];
    @Input() id;


    constructor(
        private route: ActivatedRoute,
        private conexion: ConexionPersonService) { }

    ngOnInit() {
        this.id = +this.route.snapshot.paramMap.get('id');
        this.getPeople();
        // this.getPerson();
    }

    getPeople(): void {
        //Aquí obtengo el array de People
        this.conexion.getPeople()
            .subscribe(People => {
               this.People = People;
               this.getPerson(); //ahora this.People no es undefined
            });
    }

    getPerson(): void {
        console.log ( "this en getPerson" , this); //Aquí se ven los datos
        console.log ( "persona en getPerson" , this.People); //Ya no
        console.log ( "id en getPerson" , this.id);
         this.detailPerson = this.conexion.getPerson(this.People,this.id);

     }

}

answered by 10.04.2018 в 17:11

Limit of queries in google API problem loading an HTML template with "fs" nodejs, inside an ES6 class

score 1 · Accepted Answer

This is a problem with this in subscribe(People => this.People = People) since that this does not refer to what you are waiting for.

An easy solution is to create another variable, commonly called that which refers to the property People of your class:

getPeople(): void {
  //Aquí obtengo el array de People
  const that = this
  this.conexion.getPeople()
    .subscribe(People => that.People = People);
}

I recommend reading this article about this in JavaScript which can solve many doubts since this is one of the main problems faced by JavaScript developers