1
votes

Composant Angular RxJs AutoRefresh

Je travaille sur une application Angular 8. Il est nécessaire d'actualiser automatiquement le composant toutes les 5 secondes. J'ai utilisé le code ci-dessous.

refresh.componenet.ts:

import { Observable, Subscription, interval } from 'rxjs';
.
.
listStudents$: Observable<StudentModel[]>;
private updateSubscription: Subscription;

constructor(
    private listStudentsService: ListStudentsService
  ) { }

ngOnInit(): void{
    this.GetStudentsBySubject();        
  }

private GetStudentsBySubject() {    
    this.updateSubscription = interval(5000).subscribe((val) => {
      this.listStudents$ = this.listStudentsService.getStudentsBySubject(this.subject);      
    });
  }

  ngOnDestroy() {
    this.updateSubscription.unsubscribe();
  }

Le code ci-dessus fonctionne parfaitement et actualise le composant toutes les 5 secondes.

Le composant obtient la liste des étudiants dans ngOnInit () . Ensuite, il actualise les données toutes les 5 secondes. Mais le problème est que le composant attend 5 secondes pour charger les données pour la première fois également.

Comment puis-je définir conditionnellement l'actualisation automatique de ce composant pour qu'elle s'actualise toutes les 5 secondes sans attendre la première fois.

angular rxjs observable

0 commentaires

3 Réponses :

4
votes

Vous pouvez utiliser la minuterie qui est une autre fonction de rxjs. Il est utilisé avec un délai initial et un point.

https: // www. learnrxjs.io/operators/creation/timer.html

this.updateSubscription = timer(0, 5000).subscribe((val) => { ...

1 commentaires

il semble que l'opérateur du temps soit un raccourci vers ma réponse 😁, et plus propre 👍, bon

1
votes

vous pouvez utiliser startWith opérateur

import { startWith } from 'rxjs/operators';

private GetStudentsBySubject() {    
    this.updateSubscription = interval(5000).pipe(startWith(0)).subscribe((val) => {... });
}

startWith

0 commentaires

1
votes

Les réponses précédentes fonctionnent toutes les deux, mais j'aimerais élaborer un peu plus.

Ce n'est pas une bonne idée de réaffecter vos listStudents $ en continu, car vous créerez des fuites de cette façon. De plus, le membre de la classe updateSubscription n'est pas nécessaire et vous donne beaucoup plus à penser lors du nettoyage.

import { Observable, Subscription, timer } from 'rxjs';
import { share , mergeMap } from 'rxjs/operators';

...
...
listStudents$: Observable<StudentModel[]>;

constructor(
    private listStudentsService: ListStudentsService
  ) { }

ngOnInit(): void{
    this.listStudents$ = timer(0,5000).pipe(
      mergeMap(()=>this.listStudentsService.getStudentsBySubject(this.subject)),
      share(), 
    );        
  }
}

listStudents $ est maintenant une observable "chaude".

1 commentaires

Merci. C'est exactement ce que je cherchais.