我希望在角度材质表中集成服务中的数据。
我可以看到的所有示例都引用了ts文件中的硬数据,但没有引用服务。
我的服务可以恢复我的所有患者,使用自助功能,但是当我想将它与角度材料整合时,我无法做到这一点
任何人都知道解决方案吗?
Component.ts
import { Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
import { PatientsService } from '../services/patients.service';
import { Patient } from '../models/patient.model';
import { Subscription } from 'rxjs/Subscription';
import { Observable } from 'rxjs/observable';
import { Router } from '@angular/router';
import { MatPaginator, MatTableDataSource } from '@angular/material';
import { DataSource } from '@angular/cdk/collections';
@Component({
selector: 'app-patient-list',
templateUrl: './patient-list.component.html',
styleUrls: ['./patient-list.component.scss']
})
export class PatientListComponent implements OnInit {
displayedColumns = ['prenom', 'nom', 'sexe', 'daten'];
dataSource = new MatTableDataSource<Patient>();
patients: Patient[];
patientsSubscription: Subscription;
constructor(private patientsService: PatientsService, private router: Router)
{}
ngOnInit() {
this.patientsService.getPatients().subscribe(
data => {
this.dataSource.data = data;
}
);
this.patientsService.emitPatients();
}
onNewPatient() {
this.router.navigate(['/patients', 'new']);
}
onDeletePatient(patient: Patient) {
this.patientsService.removePatient(patient);
}
onViewPatient(id: number) {
this.router.navigate(['/patients', 'view', id]);
}
ngOnDestroy() {
this.patientsSubscription.unsubscribe();
}
}
export interface Element {
prenom: string;
nom : string;
sexe: string;
daten: new Date ();
}
Component.ts
<div >
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="prenom">
<th mat-header-cell *matHeaderCellDef> Prénom </th>
<td mat-cell *matCellDef="let element"> {{element.prenom}} </td>
</ng-container>
<ng-container matColumnDef="nom">
<th mat-header-cell *matHeaderCellDef> Nom de naissance </th>
<td mat-cell *matCellDef="let element"> {{element.nom}}</td>
</ng-container>
<ng-container matColumnDef="daten">
<th mat-header-cell *matHeaderCellDef> Date de naissance </th>
<td mat-cell *matCellDef="let element"> {{element.daten}} </td>
</ng-container>
<ng-container matColumnDef="sexe">
<th mat-header-cell *matHeaderCellDef> Sexe </th>
<td mat-cell *matCellDef="let element"> {{element.sexe}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
模型
export class Patient
{
photo: string;
constructor(public nom: string, public prenom: string, public sexe:
string, public daten = new Date ()) {}
}
服务
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { Patient } from '../models/patient.model';
import * as firebase from 'firebase';
import DataSnapshot = firebase.database.DataSnapshot;
import {Observable} from "rxjs";
@Injectable()
export class PatientsService {
patients: Patient[] = [];
patientsSubject = new Subject<Patient[]>();
emitPatients() {
this.patientsSubject.next(this.patients);
}
savePatients() {
firebase.database().ref('/patients').set(this.patients);
}
getPatients() {
firebase.database().ref('/patients')
.on('value', (data: DataSnapshot) => {
this.patients = data.val() ? data.val() : [];
this.emitPatients();
}
);
}
getSinglePatient(id: number) {
enter code herereturn new Promise(
(resolve, reject) => {
firebase.database().ref('/patients/' + id).once('value').then(
(data: DataSnapshot) => {
resolve(data.val());
}, (error) => {
reject(error);
}
);
}
);
}
我没有看到这个问题的其他帖子。
答案 0 :(得分:2)
在我的服务中,我有:
getPatients(): Observable<Patient[]> {
firebase.database().ref('/patients')
.on('value', (data: DataSnapshot) => { this.patients = (data&&data.val())
? data.val() : this.patients} );
return of(this.patients);
}
在我的组件中:
ngOnInit() {
this.patientsService.emitPatients();
this.patientsSubscription =
this.patientsService.patientsSubject.subscribe((patients: Patient[]) =>
{this.patients = patients;});
this.patientsService.getPatients().subscribe(data =>
{console.log(this.patientsService.patients[0]); this.dataSource.data =
data;});