如何在不刷新页面/组件的情况下从 Angular 中的数据库中获取不断变化的数据

Question

I'm working on an Angular project where my database in mongoDB and backend in flask. My data inside one collection keeps on changing after every 10 seconds. I'm writing REST APIs to share data between Angular and MongoDB. What should I do to get the latest data in my database without refreshing the page every time.

This is my div whose heart beat,BP,O2,PR changes every 10secs.

  <ng-template #not_distressed>
                <div class="card-header" style="color: rgb(0, 0, 0); ">
                  <b>Ward No : {{pateint.ward_no}}</b>
                </div>
                <div class="card-body" style="color: rgb(0, 0, 0); ">
                  <div style="text-align: left;"></div>
                  <div style="text-align: right;"></div>
                    <h5 class="card-title"><b>Name : </b>{{pateint.patient_name}}</h5>
                    <p class="card-text">
                      <b>Heart beat : </b>{{pateint.heart_rate}}<br>
                      <b>B.P. : </b>{{pateint.BP}}<br>
                      <b>O2 : </b>{{pateint.O2}}<br>
                      <b>P.R. : </b>{{pateint.RR}}
                    </p>
                </div>
              </ng-template>

typescript file

        import { Component, OnInit } from '@angular/core';
    import { PatientVitalsService } from '../services/patient-vitals.service';
    @Component({
      selector: 'app-patient-vitals',
      templateUrl: './patient-vitals.component.html',
      styleUrls: ['./patient-vitals.component.css']
    })
    export class PatientVitalsComponent implements OnInit {
    
      public patientVital={};
    
    
      constructor(private _patientListService: PatientVitalsService) { }
    
      ngOnInit() {
        this.dataService.getdetails().subscribe((data: any)=>{
    console.log("In service",data);
    this.repos = data;
    this.patientVital = this.repos['result']
  })  
      }
    
    }

Service.ts file

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, Subject, throwError, BehaviorSubject } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { ajax } from 'rxjs/ajax';

@Injectable({
  providedIn: 'root'
})
export class DataService {
      get_symptoms = "http://127.0.0.1:5000/api/getdetails"

getdetails(): Observable<any> {
    return this.httpClient.get(this.get_details)
  }
}

Answer 1

You can implement a polling mechanism which will request data every 10 seconds. You just need to extend you existing function and tie it to timer from RxJs. Then instead of returning number use switchMap to return you desired value. Other operators are to make it more robust

import { Subject, timer} from 'rxjs';
import { switchMap, share, retry, takeUntil } from 

export class DataService {
  get_symptoms = "http://127.0.0.1:5000/api/getdetails"
  private stopPoll$: Subject<boolean> = new Subject<boolean>();

  getdetails(): Observable<any> {
    this.stopPoll$.next(false); // Reset stopPoll$ when needed again
    // start at 1st millisecond, repeat every 10
    return timer(1, 10000).pipe(
      switchMap(() => this.httpClient.get(this.get_details)), // GET data
      retry(), // retry if failure
      share(), // share -> do not create new subscribtion on a new subscribe
      takeUnitl(this.stopPoll$) // to have the ability to stop the poll
    )
  }

  stopPolling(): void {
    this.stopPoll$.next(true);
  }
}