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

Question

我正在开发一个 Angular 项目，其中我的数据库位于 mongoDB 中，后端位于 flask 中。 我在一个集合中的数据每 10 秒就会不断变化。 我正在编写 REST API 以在 Angular 和 MongoDB 之间共享数据。 我应该怎么做才能在我的数据库中获取最新数据而无需每次都刷新页面。

这是我的 div，其心跳、BP、O2、PR 每 10 秒变化一次。

  <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 文件

        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']
  })  
      }
    
    }

服务.ts 文件

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

您可以实施轮询机制，每 10 秒请求一次数据。 您只需要扩展现有的 function 并将其与 RxJs 的timer相关联。 然后，不要返回数字，而是使用switchMap来返回您想要的值。 其他运营商将使其更加健壮

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);
  }
}