Olá, pessoal, tudo bem?
Estou iniciando meus estudos com angular e estou com um problema de implementação. Tenho uma API, desenvolvida por mim, na qual os dados retornados são atualizados a cada 20 segundos no servidor.
Estou montando um frontend com angular. A ideia é atualizar a view do usuário a cada 20 segundos também (ou menos até). Mas existe um requisito funcional da aplicação, que resume-se a notificar (visualmente) o usuário, quando valor de atributo for alterado.
Para um componente renderizado da seguinte forma:
<div *ngFor="event in events">
<app-event
[id]="event.id"
[time]="event.time"
[value1]="event.value1" >
</app-events>
</div>
Sendo uma chamada de exemplo (chamada n)
"events" : [
{
"id" : 1
"time" : 45,
"value1" : 1.6
},
{
"id" : 2
"time" : 78,
"value1" : 1.5
}
]
Na chamada n+1:
"events" : [
{
"id" : 1
"time" : 46,
"value1" : 1.5
},
{
"id" : 2
"time" : 78,
"value1" : 1.6
}
]
Os valores de time
e value1
foram alterados na api na chamada n+1, portando, preciso alterar a classe do component que ele fora renderizado na chamada n. Eu li sobre questões que envolvem Subject, Observable e outras coisas, mas não ficou tão claro para mim, como executar isso.
Abaixo o código atual dos meus componentes.
events.component.ts
import { Component, OnInit, Input } from '@angular/core';
import { EventsService } from '../../services/events.service';
@Component({
selector: 'app-events',
templateUrl: './events.component.html',
styleUrls: ['./events.component.scss']
})
export class EventsComponent implements OnInit {
events = []
constructor(private eventsService: EventsService) { }
ngOnInit(): void {
this.eventsService.getEvents().subscribe((data: any[]) => {
this.events = data
})
}
}
events.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, Subject } from 'rxjs'
@Injectable({
providedIn: 'root'
})
export class EventsService {
constructor(private httpClient: HttpClient) {
}
private API_URL = "http://0.0.0.0:93"
public getEvents(): Observable<any> {
return this.httpClient.get(`${this.API_URL}/events/inplay`)
}
}
events.component.html
<div *ngFor="let event of events.data">
<app-event [event]="event"></app-event>
</div>
event.component.ts
import { Component, Input, OnChanges, } from '@angular/core';
import { SimpleChanges } from '@angular/core'
import { EventsComponent } from '../events.component';
@Component({
selector: 'app-event',
templateUrl: './event.component.html',
styleUrls: ['./event.component.scss']
})
export class EventComponent implements OnChanges {
@Input() event: any;
constructor(private eventsComponent: EventsComponent) {
}
ngOnInit(): void {
}
ngOnChanges(changes: SimpleChanges) {
console.log(changes)
}
}
Agradeço.
JavaScript
setInterval() na chamada do service no arquivoevents.component.ts
, isso atualizaria os dados no tempo que for determinado no método, ou, utilizar métodos específicos doAngular/RXJS
para isso, como otimer
: rxjs.dev/api/index/function/timer