Использование RxJ и Angular 5 для обработки отправленных сервером событий из Spring Boot

Question

Мне нужно обновлять свой Angular UI в соответствии с данными, исходящими от MySQL тщательно Spring для каждого обновления, которое происходит в MYSQL DB. Но с угловой стороны я не могу получить данные.

Это мой WebController.java в Springboot:

@GetMapping("/summary")
public  SseEmitter Summary(@RequestParam Map<String,String> queryParam,String date, String target) {    
Connection conn = null;
List<Map<String, Object>> listOfMaps = null;
Statement stmt = null;
prodDate = queryParam.get("date").replaceAll("\'", "");
prodTarget = queryParam.get("target").replaceAll("\'", "");

final SseEmitter emitter = new SseEmitter();

try{
Class.forName("com.mysql.jdbc.Driver");
System.out.println("Connecting to database...To retrive SUMMARY");
conn = DriverManager.getConnection(DB_URL,USER,PASS); 

String query= "SELECT migration_states.state END AS state, migrations.mignum, migrations.projectleader, migrations.productiondate, migrations.installationtiers, "
+ "migrations.targetplatform, migrations.apprelated, migrations.appversion "
+ "FROM (migrations LEFT JOIN migration_states ON migrations.state = migration_states.state_code) "
+ "WHERE migrations.productiondate=? AND migrations.targetplatform=? AND migration_states.state NOT LIKE '%Cancelled%' ";

QueryRunner queryRunner = new QueryRunner();
listOfMaps = queryRunner.query(conn, query, new MapListHandler(), prodDate, prodTarget);               
emitter.send(listOfMaps,MediaType.APPLICATION_JSON);


System.out.println(emitter);
conn.close();
}
catch (SQLException  se) {
se.printStackTrace();
emitter.completeWithError(se);
return emitter;

}catch(Exception e){

e.printStackTrace();
emitter.completeWithError(e);
return emitter;
}finally {
DbUtils.closeQuietly(conn);
}
emitter.complete();
return emitter;
}

Что дает мне следующий результат при срабатывании в Почтальон

http://localhost:8080/api/summary?date=2018-06-06&target=Production 


data:[{"state":"Completed","mignum":146289,"projectleader":"Eric Lok","productiondate":"2018-06-06","installationtiers":"Windows Server","targetplatform":"Production","apprelated":"UPS Pickup Point Web Application","appversion":"2.25"}, 
     {"state":"Completed","mignum":146381,"projectleader":"James Rice","productiondate":"2018-06-06","installationtiers":"Linux Web WL10","targetplatform":"Production","apprelated":"Content Only","appversion":""}, 
     {"state":"Completed","mignum":146461,"projectleader":"Nishith Jani","productiondate":"2018-06-06","installationtiers":"Linux BEA WL12","targetplatform":"Production","apprelated":"Tracking Comp","appversion":"1801.20"}, 
     {"state":"Completed","mignum":146574,"projectleader":"Nishith Jani","productiondate":"2018-06-06","installationtiers":"Linux BEA WL12","targetplatform":"Production","apprelated":"Tracking Comp","appversion":"01-00-07-17"}]  

Это мой вызов службы Angular, подписывающийся на WebController

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { map } from 'rxjs/operators';

@Injectable()
export class DashboardDataService {

public baseUrl = 'http://localhost:8080/api';

public headers = new Headers({'Content-Type': 'application/json' });
public options = new RequestOptions({headers: this.headers});  

constructor(private _http: Http) { }

getSummary(_date, _target) {
return this._http.get(this.baseUrl + '/summary?date='+_date+"&target="+_target, this.options).pipe(map((response: Response) => response.json()));
}
}  

Это мой компонент

import { Component, OnInit, OnDestroy } from '@angular/core';
import { DashboardDataService } from '../shared-service/dashboard-data.service';
@Component({
selector: 'app-dashboard-view',
templateUrl: './dashboard-view.component.html',
styleUrls: ['./dashboard-view.component.css']
})
export class DashboardViewComponent implements OnInit, OnDestroy {

constructor(private _dashboardService: DashboardDataService) { }

ngOnInit() {

this._dashboardService.getSummary(this._date, this._target).addEventListener((dashboardataa) => {
this.dashboardataa = dashboardataa;
console.log("this.dashboardata-->", this.dashboardataa);
}, (error) => { console.error('SERVER ERROR'); });
} 
}   

Но проблема в том, что

console.log("this.dashboardata-->", this.dashboardataa); 

Никогда не печатается. Я новичок в Spring, Ssemitter & Rxjs, так что я здесь что-то не так. Что я не могу понять. Читая некоторые блоги, я сказал, что я использую addEventListener , но когда я пытаюсь это сделать

this._dashboardService.getSummary(this._date, this._target).addEventListener((dashboardataa) => {
this.dashboardataa = dashboardataa;
console.log("this.dashboardata-->", this.dashboardataa); }  

Я получаю сообщение об ошибке

ошибка TS2339: свойство 'addEventListener' не существует для типа 'Наблюдаемая'.

Может кто-нибудь помочь мне, как написать правильный код на угловой стороне, чтобы получить данные json, которые будут отправлены, когда обновление произойдет на стороне сервера.

Answer 1

Вы должны использовать только Observables:

getSummary(_date, _target) : Observable<any> {
    return this._http.get(this.baseUrl + '/summary?date='+_date+"&target="+_target, 
    this.options);
}

и в вашем компоненте подпишитесь на него:

this._dashboardService.getSummary(this._date, this._target).subscribe((dashboardataa) => {
   this.dashboardataa = dashboardataa;
   console.log("this.dashboardata-->", this.dashboardataa);

   }, (error) => { console.error('SERVER ERROR'); });
} 
}