Question

我使用了角度CLI，firebase和angularfire2。我想通过选择firebase键来显示特定数据，但控制台指示管道无效。有人能帮帮我吗？

this.patientid的值是firebase密钥......

// HTML

{{(patientToDisplay | async)?.nom}}

//组件

import { Component, OnInit, Inject } from '@angular/core';
import { Patient } from '../../models/patient.model';
import { ActivatedRoute, Router } from '@angular/router';
import { PatientsService } from '../../services/patients.service';
import { AngularFireDatabase, AngularFireList, AngularFireObject} from 'angularfire2/database';
import { Location } from '@angular/common';

@Component({
selector: 'app-single-patient',
templateUrl: './single-patient.component.html',
styleUrls: ['./single-patient.component.scss'],
providers: [PatientsService]
})

export class SinglePatientComponent implements OnInit {


patientId: string;
patientToDisplay;

constructor( 
private route: ActivatedRoute, 
private location: Location,
private patientsService: PatientsService,
private diagnosticsService: DiagnosticsService,
private router: Router, 
public dialog: MatDialog, 
private formBuilder: FormBuilder
) {}

ngOnInit() {
this.route.params.forEach((urlParameters) => {
this.patientId = urlParameters['id'];
});
this.patientToDisplay = 
this.patientsService.getSinglePatient(this.patientId);
console.log(this.patientId);

}

}

//服务

getSinglePatient(Patientid: string){
return this.database.object('patients/' + Patientid);
}

Answer 1

如果您想从服务中返回observable，请使用：

getSinglePatient(Patientid: string){
  return this.database.object('patients/' + Patientid).valueChanges();
}

Answer 2

patientToDisplay: Observable<any>;

你也应该输入这个和你的获取请求，但这是一个形式，你得到它的工作：）

您收到无效管道错误的原因是您从未将patientToDisplay建立为可观察对象。异步管道需要一个observable来管道

import { Component, OnInit, Inject } from '@angular/core';
import { Patient } from '../../models/patient.model';
import { ActivatedRoute, Router } from '@angular/router';
import { PatientsService } from '../../services/patients.service';
import { AngularFireDatabase, AngularFireList, AngularFireObject} from 'angularfire2/database';
import { Location } from '@angular/common';
import { Observable } from 'rxjs/Observable'

@Component({
selector: 'app-single-patient',
templateUrl: './single-patient.component.html',
styleUrls: ['./single-patient.component.scss'],
providers: [PatientsService]
})

export class SinglePatientComponent implements OnInit {


patientId: string;
patientToDisplay: Observable<any>;

constructor( 
private route: ActivatedRoute, 
private location: Location,
private patientsService: PatientsService,
private diagnosticsService: DiagnosticsService,
private router: Router, 
public dialog: MatDialog, 
private formBuilder: FormBuilder
) {}

ngOnInit() {
this.route.params.forEach((urlParameters) => {
this.patientId = urlParameters['id'];
});
this.patientToDisplay = 
this.patientsService.getSinglePatient(this.patientId);
console.log(this.patientId);

}

}

管道数据显示无效

2 个答案: