My BehaviorSubject not working as expected and does not seem to call "next"

Question

I have a Clip Service:

export class ClipService {

    allClips: Clip[] = [];
    private clips = new BehaviorSubject<Clip[]>(null);

    constructor(private http: HttpClient) {
        this.loadClips();
    }

    private fetchClips(body?: string): Observable<Clip[]> {
        let url = myurl/clips;
        try {
            return this.http.get<Clip[]>(url);
        } catch (e) {
            console.error('Error fetching clips: ' + e);
        }
        
    }

    loadClips(): void {
        this.fetchclips().subscribe(allClips => this.allClips = allClips);
        this.setClips(this.allClips);
    }

    getClips(): Observable<Clip[]> {
        return this.clips.asObservable();
    }
}

and a ClipComponent.ts where I cosume the service like this:

ngOnInit(): void {
    this.clipService.getClips().subscribe(clips => {
        this.allClips = clips;
        this.clips = this.allClips;

        console.log(this.clips);
        this.populateFilters(this.clips);
    });
}

Even though a call to the API is triggered and there are around 200 clips returned, the console.log in the component always logs an empty array.

What am I missing here?

I updated the code and cut out everything that is not needed here. I don't know how to create a "live" example, since I consume a DB. Is there a way of mocking that? — Sebastian M, Sep 24 '20 at 08:45

ruth · Accepted Answer · 2020-09-24T09:38:33.217

The variable this.allClips is assigned asynchronously in the service. So any statements that directly depend on it must be inside the subscription. By the time you're doing this.setClips(this.allClips); it still holds the previous value or undefined.

loadClips(): void {
  this.fetchclips().subscribe(allClips => {
    this.allClips = allClips;
    this.setClips(this.allClips);
  });
}

You could find more info about asynchronous data here.

If you're initializing the BehaviourSubject with null, you could as well use ReplaySubject with buffer 1. It serves the same purpose as the BehaviorSubject except it doesn't need a default value (so you don't have to deal with the initial null) and it doesn't have the BehaviorSubject's synchronous getValue() function.

private clips = new ReplaySubject<Clip[]>(1);

My BehaviorSubject not working as expected and does not seem to call "next"

1 Answers1