Angular如何订阅界面更改？

Question

I am trying to subscribe to my interface and watch for changes, but I have errors.

1. Getting data from api and asigning it to this.candidateProfile :

     export interface CandidateProfile { about: string, c_id: {}, certificates_training: [], city: string, country: string, currency: string, email: string, expectedpayhourly: boolean, expectedpayhourlyend: number, expectedpayhourlystart: number, expectedpaymonthly: {}, expectedpaymonthlyend: number, expectedpaymonthlystart: number, experience: [], firstname: string, hobbies: {}, jobskills: [], langugaes: {}, lastname: string, personalskills: [], photo: string, remotework: boolean, role: string, studies: {}, willingtorelocate: {}, willingtorelocatecity: {}, worktype: string } 

Auth.service.ts :

candidateProfile: Observable<CandidateProfile>;

getProfile(id, token) {
const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${token}`
  })
};

this.http.get(`users/${id}`, httpOptions).subscribe(data => {
  this.candidateProfile = data;
},
  (error) => { console.log(error) },
  () => {
    console.log('got profile', this.candidateProfile);
  })

 }

Component.ts :

this.auth.candidateProfile.subscribe( data => {
console.log(data)
})

error :

this.auth.candidateProfile.subscribe is not a function

Answer 1

When you subscribe to an observable, you subscribe to its value, which is not an observable. When you are doing:

this.candidateProfile = data;

You are essentially storing in candidateProfile the value that you got from the observable. Of course this data does not have the function 'subscribe' anymore since it's not an observable.

You should store in 'this.candidateProfile' the observable itself, not the value that you get from it. Like so:

this.candidateProfile = this.http.get(`users/${id}`, httpOptions);

Hope that I helped you, have a nice day!

Answer 2

That is not always the best way to do things. You should not return the observable on your service file. The standard practice is to return the observable on your component itself.

In terms of error handling, you can either do it on your service, or on your component. For the example I am providing below, I will be handling the errors on the component.

On your service, you will need to add the return statement:

getProfile(id, token) {
  const httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${token}`
    })
  };

  return this.http.get(`users/${id}`, httpOptions);
}

On your component.ts, you subscribe to it to return the observable value:

this.auth.candidateProfile.subscribe( data => {
  console.log(data)
}, error => {
  // handle error
});

Answer 3

modify your auth service like following

export class AuthService {
    private _candidateProfile$: BehaviorSubject<CandidateProfile> = new BehaviorSubject(null);

    getProfile(id, token): void {
        const httpOptions = {
            headers: new HttpHeaders({
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${token}`
            })
        };

        this.http.get(`users/${id}`, httpOptions).subscribe(data => {
                this._candidateProfile$.next(data);
            },
            (error) => { console.log(error) },
            () => {
                console.log('got profile', data);
            })
    }

    get candidateProfile$(): Observable<CandidateProfile> {
      return this._candidateProfile$.asObservable();
    }
}

then you can use as following :

this.auth.candidateProfile$.subscribe( data => {
console.log(data)
})

Explication

Goal is to have internal observable on this service which will broadcast your current candidate profile.

Anywhere on your application you can subscribe to it and get latest fetched profil without trigger again the getProfile method (and ajax request under the hood).

to make it more easy to consume out of AuthService i have create magic getter to abstract it.

get candidateProfile$(): Observable<CandidateProfile> {
  return this._candidateProfile$.asObservable();
}

it take your BehaviorSubject and turn it to simple Observable . Otherwise you allow AuthService consumer to next on your Observable , and it not what is expected.

the only one way to broadcast new CandidateProfile should be here :

 this.http.get(`users/${id}`, httpOptions).subscribe(data => {
      this._candidateProfile$.next(data);
 });

---

I also recommand you to change your getProfile like following

getProfile(id, token): Observable<CandidateProfile> {
    // [...]
    this.http.get(`users/${id}`, httpOptions).subscribe(data => {
           this._candidateProfile$.next(data);
        },
        // [...]
    );

    return this.candidateProfile$;
}

Like this you can consume your class as following :

// Fetch new profile.
this.auth.getProfile(id, token).subscribe();
// Fetch last requested profile.
this.auth.candidateProfile$.subscribe();