Rxjs Subject.asObservable() not working but BehaviorSubject works...why?

Question

I have checked out this https://github.com/angular/angular/issues/12129 but I don't see any solution...

Angular 2.0.1 AsyncPipe doesn't work with Rx Subject .

The solution here is to create an observable variable in the component

Which I have but still not working... not sure why its not working if I switch Subject in my UserStateService to BehaviorSubject everything works...

Note: Both UserDataService and UsersStateService is provided at the root app.module.ts.

user-data.service.ts -> make http request which I call in my component

fetchUsers():void{
   this.httpClient.get<User[]>(this.apiUrl, {
  observe: 'body',
  responseType: 'json'
})
.subscribe( (response: User[])=>{
    this.usersStateService.setUsersList(response);  <-- set to local state service

  });

}

users-state.service.ts

userListState = new Subject<User[]>();   <-- Change this to BehaviorSubject<User[]>([])  everything works!

setUsersList(users: User[]):void {
  this.userListState.next(users.slice());
}

getUsersListState():Observable<User[]>{
   return this.userListState.asObservable();
}

component.ts

 users: Observable<User[]>;

 ngOnInit() {

 if(this.usersStateService.hasUserList()){

  this.users = this.usersStateService.getUsersListState();  -|
                                                             |
  // this.usersStateService.getUsersListState()              |
  //   .subscribe((x) => console.log(x));                   -| <-- This does not output for some reason IF Subject... BehaviorSubject works..
}else{
  console.log("No data in local stat -> fetch") . <-- This works either with Subject or BehaviorSubject
  this.userData.fetchUsers();
  this.users = this.usersStateService.getUsersListState();
}

}

HTML

<li *ngFor="let u of (users | async)">u.name</li>

Please any insights will be great thank you!!

Subject is already an observable you can just point to that. In your component you can just do this.users = this.usersStateService.userListState; — Deepak Sharma, Jun 27 '18 at 18:25
https://stackoverflow.com/questions/43348463/what-is-the-difference-between-subject-and-behaviorsubject — Vikas, Jun 27 '18 at 18:32

dAxx_ · Accepted Answer · 2018-06-28T08:33:12.360

Subject does not hold any data, its just invoke anything that subscribe to it with the value. BehaviorSubject holds data and everytimes you call emit it is replacing the current data.

When you are trying to console log from your service the UserList:
With Subject it does not contain any persistent data.

this.usersStateService.getUsersListState()              
 .subscribe((x) => console.log(x));  ==> would be empty

With BehaviorSubject it holds the last data, and also can be initialized with values.

let _array = ['one','two']
let bs = new BehaviorSubject<any>(_array ).asObservable();
bs.subscribe(arr => {
 console.log(arr) // ==> Would log the _array: ['one','two']
})

So in your case, when you trying to get the data via Subject, it just doesnt exists after the first invoke (when you emit), while BehaviorSubject holds your initial value, and each time you emit, so theres always persistent data.
**If you need more than one value each time, you should look into ReplySubject

Do you mind provide some code to showcase what you mean I think it will be make your answer more complete... I will mark as answer once you updated it — Eric Huang, Jun 28 '18 at 03:32
I updated with more details, i hope its better now. good luck — dAxx_, Jun 28 '18 at 08:33
Thanks for the update... To others, also check out Vikas link in the comments. — Eric Huang, Jun 29 '18 at 06:57

Rxjs Subject.asObservable() not working but BehaviorSubject works...why?

1 Answers1