Do not load the data the first time in Angular5

Question

Do not load the data the first time in Angular5

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

When I click on a button I should get the data, but I have to press it twice.

Here I call getPeople () to get an array with the data and then I call getPerson () in the service connection-person-service;

export class DetailUserComponent implements OnInit {

    detailPerson: Person; 
    @Input() id;


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

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

    getPerson(): void {  
        this.detailPerson = this.conexion.getPerson(this.id);   
        console.log('al final obtengo' , this.detailPerson );    
     }
}

In the service connection-person-service: I get the Array with the people, I also have the console log "ANTESOBTENIDO" that will give undefined the first time

@Injectable()
export class ConexionPersonService {

    _people: Person[];

    constructor(
        private http: HttpClient,
    ) { } 


    public getPeople() {

        const url = 'assets/Json/listPerson.json'; 
        this.http.get<Person[]>(url).subscribe(data => {this._people = data});
        console.log('ANTESobtenido ' , this._people);//aqui
    }

    public getPerson(id:number): Person{

        console.log('ID ' , id);

        if(this._people) {
            var per = this._people.find(person => person.id_user == id);
            console.log('obtenido ' , per);
            return this._people.find(person => person.id_user == id);
        }
    } 

}

As you can see in the img the first time I give it does not work, the next time I click on it, it already shows me the data.

angular

asked by EduBw 11.04.2018 в 10:45

source

2 answers

0

You should think that the subscribe is an asynchronous method, so it is very likely that when loading the first time you still do not have data, and the following times you are using data loaded from the previous time.

What you should do is that the service returns the promise and it is executed in the component

 public getPeople() {
        const url = 'assets/Json/listPerson.json'; 

        return this.http.get(url)

        console.log('ANTESobtenido ' , this._people);//aqui
    }

getPerson(): void {  
        this.conexion.getPerson(this.id).subscribe(data => {
                this.detailPerson = data
                console.log('al final obtengo' , this.detailPerson );    
        });   

}

answered by 11.04.2018 в 12:36

Fatal error: Can not use object of type Course as array in SSHKit :: Runner :: ExecuteError: Exception while executing as [email protected]

score 0 · Accepted Answer

Final code:

The problem I always had was how to pass the variable that you get from the subscribe to the getPerson method, I tried this with this.that. and a lot of things ..., but I've seen that with {I can call the function directly and pass the variable directly to it. }

export class DetailUserComponent implements OnInit {

    detailPerson: Person;
    @Input() id;

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

    ngOnInit() {
        this.id = +this.route.snapshot.paramMap.get('id');
        this.conexion.getPeople().subscribe(data => {
            this.getPerson(data)
        }); //llamar aquí a getPerson recogiendo el subscribe
    }

    getPerson(data): void {
        this.detailPerson = this.conexion.getPerson(data,this.id);
        console.log('al final obtengo', this.detailPerson);
    }

}

@Injectable()
export class ConexionPersonService {

    constructor(
        private http: HttpClient,
    ) { }


    public getPeople(): Observable<Person[]> {
        const url = 'assets/Json/listPerson.json';
        return this.http.get<Person[]>(url)
    }

    public getPerson(data, id: number) {
        var per = data.find(person => person.id_user == id);
        return data.find(person => person.id_user == id);
    }


}