[英]Angular Material Data Table component is not live streaming
我在我的項目中使用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()
服務正在獲取正確的數據。 但是視圖無法實時更新。
HttpClient不流式傳輸。 您只獲取一次數據。
首先,您需要一個實時數據庫/后端解決方案,然后您需要通過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() {}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.