Angular Material Data Table组件未实时流式传输

Question

我在我的项目中使用Angular Material Data Table。 该表正在渲染数据

我的问题是，每次我应该刷新页面时，将新数据添加到数据库时都无法自动更新视图。

根据Cdk-table ，在阅读了本教程之后，我尝试将实时数据流添加到表中：

这是我的逻辑：

import { Component, OnInit } from "@angular/core";
import { MatTableDataSource } from "@angular/material";
import { AjoutprojService } from "../ajoutproj.service";
import { NouveauProjet } from "../models/nouveau-projet";
import { Observable } from "rxjs/Observable";
import 'rxjs/add/observable/merge';
import { DataSource } from "@angular/cdk/collections";



@Component({
  selector: "app-liste-projets",
  templateUrl: "./liste-projets.component.html",
  styleUrls: ["./liste-projets.component.css"]
})
export class ListeProjetsComponent implements OnInit {
  constructor( private ajoutProj: AjoutprojService  ) {}
  nouveauProjet: NouveauProjet[];
  nouveauProjet2: NouveauProjet[];

  stateExression: string = "inactive";

  ngOnInit() {}

  displayedColumns = ["Nom projet", "Lead Projet", "effectif"];
  dataSource = new UserDataSource(this.ajoutProj);
  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
    //this.dataSource.filter = filterValue;
  }

}
export class UserDataSource extends DataSource<any> {
  constructor(private ajoutProj: AjoutprojService) {
    super();
  }


/*returns an observable that emits an array of data. 
Whenever the data source emits data to this stream, the table will render an update.*/

  connect(): Observable<NouveauProjet[]> {
    return this.ajoutProj.getAllProj();
  }
  disconnect() {}
}

这是我的服务

getAllProj(): Observable<NouveauProjet[]> {
  return this.http.get<NouveauProjet[]>(
    "http://127.0.0.1:8081/api/proj/projets"
  );
}

ajoutProj.getAllProj()服务正在获取正确的数据。 但是视图无法实时更新。

Answer 1

HttpClient不流式传输。 您只获取一次数据。

Answer 2

首先，您需要一个实时数据库/后端解决方案，然后您需要通过websocket连接到该数据库，并监听数据库中的更改。

我喜欢并打包等式的客户端和服务器端的一些框架/库，使整个过程变得容易得多：

Fireloop-建立在nodejs的Loopback 3之上，提供Angular SDK的创建。 客户端和服务器上的模型和API相同。 打字稿，一路可观察。 太棒了

Firebase-“无后端”，与您可能习惯的任何REST方案完全不同的“服务器”思维方式。

流星-一个整体的框架，可能也与您习惯的相去甚远。

当然，总有另一种方法（效率很低）：每X秒轮询一次数据库以进行更改。

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/switchMap';
export class UserDataSource extends DataSource<any> {
  constructor(private ajoutProj: AjoutprojService) {
    super();
  }

  connect(): Observable<NouveauProjet[]> {
    const initialDelay = 0; // Time to wait before first poll, after the table has connected to this DataSource
    const period = 10000; // Polling period in milliseconds
    return Observable.timer(initialDelay, period)
        .switchMap(() => this.ajoutProj.getAllProj());
  }
  disconnect() {}
}