Observable pipe async usually empty until multiple refresh

Question

The condition observable$ | async; else loading; let x most of the time stops in loading and it takes only some refreshes in the browser for the data to appear.

Here is the code I used:

export class CourseComponent implements OnInit {

course: Course;

sessions: Session[] = [];
sessionssubject$ = new Subject();
sessions$ = this.sessionssubject$.asObservable();

tasks: Task[] = [];
taskssubject$ = new Subject();
tasks$ = this.taskssubject$.asObservable();

constructor(
    protected courseService: CoursesService,
    protected taskService: TasksService,
    protected sessionService: SessionsService) { }


ngOnInit() 
{
        
    this.courseService.get(id).subscribe(
           data =>{
                this.course = data;
                this.sessionService.getByCourseId(this.course.id).subscribe(
                    data => {
                        data.sort((a, b) => a.startDate < b.startDate ? -1 : 1);
                        this.sessions = data;
                        this.sessionssubject$.next(this.sessions)
                    }   
                );
                this.taskService.getByCourseId(this.course.id).subscribe(
                    data => {
                        this.tasks = data;
                        this.taskssubject$.next(this.tasks);
                    }
                );
            }
      );
}

And here is part of HTML file used:


        
            Sessions
            
        
        
            
            
                
                    
                        
                            
                                
                                    
                                        
                                            
                                            {{session.startDate | date:'MMM dd, yyyy'}}
                                            
                                            {{session.endDate | date:'MMM dd, yyyy'}}
                                        
                                        
                                            
                                            
                                                
                                                    {{application.value}} / {{session.capacity}}
                                                
                                            
                                            
                                        
                                        
                                            
                                        
                                        
                                            
                                        

                                        
                                            
                                        
                                                                            
                                
                            
                         
                        
                            
                                
                                {{session.startDate | date:'MMM dd, yyyy'}}
                                
                                {{session.endDate | date:'MMM dd, yyyy'}}
                            
                            
                                
                                
                                    
                                        {{application.value}} / {{session.capacity}}
                                    
                                
                                
                            
                            
                                
                            
                            
                            
                                
                            
                        
                    
                
            
            
            
                
                    
                    This course has no session!

I have checked the console, and it was always empty with no errors, the data is present in the database and the API is always alive.

**EDIT: ** After applying the solution proposed in this answer, the content starts to appear more than before but still having the same problem but it is less frequent.

iamaword · Accepted Answer

It could be due to your 'tasks' variable that you use in your .next is an array, which is an object is js and passed by ref. technically, it would be .nexting the same item, and that causes the subject to not trigger for it's observers.

try something like: (different ways to pass a new object from an existing array)

this.taskSubject$.next(new Array(this.tasks))
this.taskSubject$.next([...this.tasks])
this.taskSubject$.next(this.tasks.slice(0))

:

 this.taskService.getByCourseId(this.course.id).subscribe(
                data => {
                    this.tasks = data;
                    this.taskssubject$.next(this.tasks); <<< ----- this.tasks is an array
                }
            );

Observable pipe async usually empty until multiple refresh

Answers (2)

Related Questions