El modelo de API contiene categorías de uso de la CPU que siguen actualizándose dinámicamente en la API. Pero cuando actualizo la página, solo actualiza los datos, pero se puede hacer sin actualizar la página en la vista. Setimeout Funciona bien, ¿hay algún otro método que no sea setTimeoutInterval?
//aplicación.servicio.ts
private behaviourData = new BehaviorSubject<Model>(null); getBPmInfo(): Observable<Model>{ return this.http.get<Model>(`${this.url}`).pipe( retry(3), tap(data => this.behaviourData.next(data)) ); }//aplicación.componente.ts
model!: Model; ngOnInit() { getInformation(){ this.bpmService.getBPmInfo().subscribe(data => { this.model = data; }); } }//aplicación.componente.html
<div> <h1>CPU Usage{{model?.cpuUsage}}</h1> </div>Pero los datos deben actualizarse dinámicamente sin actualizar la página. Probé con BehaviourSubject. No sé por qué no funciona. ¿Alguien puede ayudarme en esto por favor?
Puede usar Intervalo (milisegundos) para obtener datos. uso :
counter = interval(60000); // sets 60 seconds interval subscription: any = null; ngOnInit(): void { this.subscription = this.counter.subscribe(f => { this.bpmService.getBPmInfo().subscribe(data => { this.model = data; }); }) }El método de su servicio solo debe devolver un Observable. Si realmente desea utilizar un BehaviorSubject, debe definirse en su "app.component.ts" de la siguiente manera:
private behaviourData = new BehaviorSubject<Model>(null); public model$: Observable<Model>; constructor { this.model$ = this.behaviourData.asObservable(); }Luego, debe descartar el "toque (datos => this.behaviourData.next (datos))" en su servicio y moverlo al componente.
Y finalmente, simplemente suscríbase al observable en su ngInit y olvídese del método "getInformation()" así:
ngOnInit() { this.bpmService.getBPmInfo().subscribe(data => { this.behaviourData.next(data) }); }Y en su plantilla, solo usa el observable "modelo $" así:
<div> <h1 *ngIf="(model$ | async) as model">CPU Usage{{model.cpuUsage}}</h1> </div>