Как я могу заставить свои функции вызывать по порядку? - PullRequest
Новая
       10

Как я могу заставить свои функции вызывать по порядку?

0 голосов
/ 23 февраля 2019

Сводка: У меня есть компонент диаграммы, компонент меню фильтра и служба, которая фильтрует и устанавливает BehaviorSubject.Я хочу, чтобы моя служба сначала выполняла HTTP-вызов для получения данных, мое меню фильтров для передачи дат фильтрации в службу для фильтрации данных и, наконец, мой компонент диаграммы для подписки на BehaviorSubject, чтобы он мог отображать отфильтрованные данные.

Компонент меню фильтра: 

export class FilterMenuComponent {
startDate: string;
endDate: stirng;

constructor(private service: FilterService) { }

ngOnInit() {
    this.service.setData();
    this.setDates();
}

setDates() {
    //grabs dates from ui
    this.service.filterData(startDate, endDate);
}

Служба фильтрации: 

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;    
    });
}

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

Компонент диаграммы: 

export class ChartComponent {
data: Data;

constructor(private service: FilterService) { }

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

Проблема: Поскольку вызов http для установки исходных данных может занять довольно много времени, FilterMenuComponent уже выполняется и вызывает фильтрацию данных.Затем я получаю ошибки при вызове .filter on undefined.Мне нужно, чтобы FilterMenuComponent ожидал и вызывал this.service.filterData() до тех пор, пока ПОСЛЕ FilterService не получит свои исходные данные от вызова http.

Ответы [ 4 ]

0 голосов
/ 24 февраля 2019

Вместо вызова setDates() в ngOnInit из FilterMenuComponent, вы можете вызвать его в _http.get() обратном вызове: 

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

, но для этого требуется передать startDate и endDate.Вы также можете хранить эти переменные в классе FilterService в качестве его свойств.

Если вы этого не сделаете, просто верните конечное значение Observable из setData(), как предлагают другие пользователи.

0 голосов
/ 24 февраля 2019

Ниже приведено решение

Компонент меню фильтра: 

export class FilterMenuComponent {
startDate: string;
endDate: stirng;

constructor(private service: FilterService) { }

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

setDates() {
    //grabs dates from ui
    this.service.filterData(startDate, endDate);
}

Служба фильтрации: 

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);
}

использует FilterDataBS, чтобы указать, когда были загружены данные дата затем использовать его по подписке

0 голосов
/ 24 февраля 2019

Ниже приведено решение

Компонент меню фильтра: 

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

Служба фильтрации: 

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

использует фильтрованные данные для загрузки данных даты, когда они были загруженыа затем использовать его по подписке

0 голосов
/ 24 февраля 2019

Вы должны вернуть наблюдаемое из вашей функции setData, чтобы определить, когда следует фильтровать данные.Вот как вы можете это сделать: 

setData() {
  // Return an Observable to detect when data has
  // been received
  return new Obervable(observer => {
    //http call to get initial data
    this._http.get().subscribe(data => {
      this.data = data;
      observer.next();
    });
  });
}

Затем подписаться на наблюдаемое в вашем FilterMenuComponent: 

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