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

【问题标题】：How to get the constantly changing data from database in Angular without refreshing the page/component如何在不刷新页面/组件的情况下从 Angular 中的数据库中获取不断变化的数据
【发布时间】：2021-05-17 10:13:50
【问题描述】：

我正在开发一个 Angular 项目，我的数据库在 mongoDB 中，后端在烧瓶中。我在一个集合中的数据每 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>

打字稿文件

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

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

【问题讨论】：

嘿。请提供一些您已经尝试过的代码。否则此问题将被锁定。
我还没有专门实现任何方法来持续访问数据。您能建议任何实施方法吗？

标签： angular typescript mongodb flask rest

【解决方案1】：

您可以实现每 10 秒请求一次数据的轮询机制。您只需要扩展现有功能并将其绑定到来自 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);
  }
}

【讨论】：