0
votes

Comment puis-je forcer mes fonctions à appeler dans l'ordre?

Résumé: strong> J'ai un composant graphique, un composant de menu filtrant et un service qui filtre et définit un comportement. Je veux que mon service ait initialement un appel HTTP pour obtenir des données, mon menu de filtre pour transmettre les dates de filtre au service pour filtrer les données et enfin mon composant de graphique pour vous abonner au comportement afin de pouvoir afficher les données filtrées.

Composant de menu Filtre: FORT> P>

export class ChartComponent {
data: Data;

constructor(private service: FilterService) { }

ngOnInit() {
    this.service.filteredDataBS.subscribe(data => {
        this.data = data;
    });
}

typescript angular observable behaviorsubject

0 commentaires

4 Réponses :

0
votes

Vous devez retourner un observable de votre fonction setdata code> pour détecter quand filtrer les données. Voici comment vous pouvez le faire:

ngOnInit() {
  this.service.setData().subscribe(() => {
    this.setDates();
  });
}

1 commentaires

Incroyable, merci! Cela me permet de ne pas filtrer les données tant que c'est renvoyé, ajoutez des conditionnels à valider les données avant de filtrer afin que je ne puisse pas sortir d'erreur, ce qui garantit que l'appel HTTP n'est effectué qu'une fois.

0
votes

ci-dessous est une solution

Composant de menu Filtre: P>

export class FilterService {
filteredDataBS: BehaviorSubject<Data>;
data: Data;

constructor(private _http: HttpClient) { }

setData() {
    //http call to get initial data
    this._http.get().subscribe(data => {
        this.data = data;    
        this.filteredDataBS.next(data);
    });
}

filterData(startDate: string, endDate: string) {
    this.data = this.data.filter(xxxxxxxxxxxxxx); 
    this.filteredDataBS.next(data);
}

0 commentaires

0
votes

ci-dessous est une solution

Composant de menu Filtre: P>

setData() {
    //http call to get initial data
    this._http.get().subscribe(data => {
        this.data = data;    
        this.filteredDataBS.next(data);
    });
}

0 commentaires

0
votes

Appelant à la place de setDates () code> dans ngoninit code> de filtermencomponent code>, vous pouvez l'appeler dans _http.get () Code> Callback:

setData(startDate, endDate) {
  //http call to get initial data
  this._http.get().subscribe(data => {
    this.data = data;
    this.filterData(startDate, endDate);
  });
}

2 commentaires

Le seul problème avec cette solution est que lorsque les dates sont modifiées sur le filtreMenuComponent, via un dayspicker, je ne veux pas que cela rend l'appel http à nouveau. Désolé, j'aurais dû clarifier dans le poste que les dates pourraient être changées sur l'interface utilisateur.

Vous pouvez appeler setingdates () en tant que gestionnaire d'événements DatePicker :)