Метод компонента не может назначить данные, которые еще не были получены службой

Question

officeView.component.ts

setSelectedPerson(id:number)
    {
        this.pservice.getPerson(id);
        localStorage.setItem("selectedPerson", JSON.stringify(this.pservice.person));
    }

person.service.ts

getPerson(id:number)
    {
        this.http.get(personUrl + id).subscribe(response => this.person = response )

    }

person:Person;

Я выполняю метод setSelectedPerson из OfficeViewComponent и вот что я надеюсь на это:

1. Я прошу PersonService извлечь данные из API и назначить их переменной - PersonService.person;

2. Теперь, когда ответ назначен переменной «Служебный», я ожидаю, что он будет преобразован в строку и сохранен в localStorage.

Но вот что на самом деле происходит:

Я прошу PersonService извлечь данные, PersonService реагирует и продолжает запрос, но к тому времени, когда PersonService.getPerson () завершится, localStorage уже попытался собрать данные из PersonService.person, который - в то время - был назначен.

Я знаю, что есть способ подождать, пока сервисный метод не завершит свою работу, но я не знаю точно, что мне следует использовать.

Answer 1

Верните подписку из сервиса и используйте ее для установки данных внутри нее. Вам не нужно никаких переменных внутри вашего сервиса.

officeView.component.ts :

setSelectedPerson(id:number){
    this.pservice.getPerson(id).subscribe(
        response => {
            localStorage.setItem("selectedPerson", JSON.stringify(response));
        },error => {
            console.log('Error :',error.error)
        }
    )
}

person.service.ts :

getPerson(id:number) : Observable<any>{
    return this.http.get(personUrl + id);
}

Answer 2

Вы правы, вы должны подождать, пока результат не будет готов.

К тому времени вы можете вызвать setSelectedPerson fun c.

//service func
getPerson(id:number) {
   return this.http.get(personUrl + id);
}

//component func
setSelectedPerson(id:number){
   this.pservice.getPerson(id).subscribe(data => {
       localStorage.setItem("selectedPerson", JSON.stringify(data ));
   });   
}

Answer 3

Проблема с вашим кодом - early subscribe в самой службе, в идеале она должна быть в компоненте (у вызывающей стороны)

officeView.component.ts:

setSelectedPerson( id : number ){
    this.pservice.getPerson(id).subscribe(
        response => {
            localStorage.setItem("selectedPerson", JSON.stringify(response));
        },error => {
            console.log( 'Error :',error.error )
        }
    )
}

person.service.ts:

getPerson( id : number ) : Observable< any >{
    return this.http.get( personUrl + id );
}

Answer 4

person.service.ts

getPerson(id:number) {
     return this.http.get(personUrl + id);

person:Person;

и при вызове службы HTTP вы должны использовать подписку

setSelectedPerson(id:number){
    this.pservice.getPerson(id).subscribe(data=>{
         console.log(data);
    });
}