Я заметил очень странное поведение в моем приложении Angular - PullRequest
0 голосов
/ 15 ноября 2018

введите код здесь, так что я использую данные, которые я получаю из метода getDashboardsSEE в слое сервиса. Строки для доступа к данным:

this.dashboardService.getDashboardsSSE().subscribe(data => {

  if(data.length > 0) {
    this.dashboards = data;
    this.currentDashboard = this.dashboards[0].id;
    this.communicationService.setDashboard(this.currentDashboard);  
    this.noDashboard = false;
  }
});

getDashboardsSSE использует EventSource для получения данных. Сначала он выталкивает весь поток в массив, а затем возвращает этот массив как наблюдаемый. Метод getDashboardsSSE:

    getDashboardsSSE(): Observable<any[]> {
    let dashboards = []
    return Observable.create((observer) => {
      let eventSource = new EventSource(this.sseUrl);
      eventSource.onmessage = (event) => {
        let dashboard = JSON.parse(event.data);
        dashboards.push(dashboard);
      };
      eventSource.onerror = (error) => {
        if(eventSource.readyState === 0) {
          console.log('The stream has been closed by the server');
          eventSource.close();
          observer.next(dashboards);
          observer.complete();
        } else {
          observer.error('Error: ' + error);
        }
      };

    });
  }

Проблема здесь в том, что страница отображается только тогда, когда я нажимаю на что-то вроде нажатия F12 или нажатия на другие интерактивные элементы на странице. Кто-нибудь замечает такое поведение раньше? Этого не происходит, когда я использую данные из стандартной конечной точки REST, используя объект http. Кто-нибудь сталкивался с этой проблемой раньше и как вы ее обошли?

1 Ответ

0 голосов
/ 15 ноября 2018

Кажется, вы вызываете getDashboardsSSE, когда происходит событие?Когда вы запускаете его?

Почему бы и нет:

const dashboardObserver = this.dashboardService.getDashboardsSSE();
const subscription = dashboardObserver.subscribe(data => {
if(data.length > 0) {
    this.dashboards = data;
    this.currentDashboard = this.dashboards[0].id;
    this.communicationService.setDashboard(this.currentDashboard);  
    this.noDashboard = false;
  }
});
...