Tengo una duda desde hace varios días con Angular y la programación reactiva.
Estoy cargando información en el componente implementando una interfaz ngOnInit
export class WebsiteListComponent implements OnInit {
quoteArray: Ticker[] = [];
users: Ticker[]=[];
pagination: boolean;
page: number;
size: number;
data: Ticker[] = [];
interval: any;
i = 0;
constructor(private customerService: WebsiteService, private quoteBlockingService: WebsiteService) {
this.pagination = true;
this.page = 0;
this.size = 50;
}
ngOnInit() {
setInterval(() => {
this.users = [];
this.customerService.getMyEventSourceStream()
.subscribe(
(newUser) => {
this.users = this.users.concat(newUser);
console.log(this.users);
}
)
}, 1000);
}
}
El HTML a continuación
<ul>
<li *ngFor="let contact of users">
{{contact.id}}
{{contact.symbol}}
</li>
</ul>
Esto me pinta el array en la consola de la siguiente forma.
Cuando pongo el this.users = []; en la consola me lo pinta bien pero en el HTML no y no se porqué sucede esto.
setInterval(() => {
this.users = [];
this.customerService.getMyEventSourceStream()
.subscribe(
(newUser) => {
this.users = this.users.concat(newUser);
console.log(this.users);
}
)
}, 1000);
En el HTML se visualiza de la siguiente forma.
Alguien podría ayudarme la verdad que estoy bastante amargado con esto.
Aañado el código del servicio que básicamente hace una llamada de forma reactiva.
@Injectable({
providedIn: 'root'
})
export class WebsiteService {
private customersList: Ticker[] = new Array();
private baseUrl = 'http://localhost:9001';
constructor(
private _http: HttpClient,
private _zone: NgZone
) { }
getMyEventSourceStream():Observable<Ticker> {
return new Observable<Ticker>((observer) => {
let eventSource = new EventSource(this.baseUrl);
console.log("EventSource"+eventSource);
eventSource.onmessage = (event) => {
let json = JSON.parse(event.data);
observer.next(new Ticker(json['id']));
};
eventSource.onerror = (error) => {
if(eventSource.readyState === 0) {
console.log('The stream has been closed by the server.');
eventSource.close();
observer.complete();
} else {
observer.error('EventSource error: ' + error);
}
}
});
}
users: Ticker[]=[];
vuelves en ngOnInit a declararthis.users = [];
?