Question

我希望在角度材质表中集成服务中的数据。

我可以看到的所有示例都引用了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);
            }
          );
         }
     );
     }

我没有看到这个问题的其他帖子。

Answer 1

在我的服务中，我有：

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

Angular Material 6 - mat-table服务数据

1 个答案: