尝试使用snapshotChanges()从firebase获取数据时出现changes.forEach错误,但如果我使用valuechanges(),它会正常工作。我不确定我做错了所以请帮忙
import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection,
AngularFirestoreDocument } from "angularfire2/firestore";
import { BehaviorSubject } from "rxjs/BehaviorSubject";
import { of } from "rxjs/Observable/of";
import {Observable} from 'rxjs';
import 'rxjs/add/operator/map';
import { Employee } from "../models/employee";`
@Injectable()
export class EmployeeService {
employees: Observable<Employee[]>;
employeeCollection: AngularFirestoreCollection;`
constructor( public db: AngularFirestore ) {
db.firestore.settings({ timestampsInSnapshots: true });
this.employeeCollection = this.db.collection('employee');
this.employees = this.employeeCollection.snapshotChanges().map(changes => {
return changes.map(a => {
const data = a.payload.doc.data() as Employee;
data.id = a.payload.doc.id;
return data;
});
});
}
getEmployees(){
return this.employees;
}
这是我的组件
import { Component, OnInit } from '@angular/core';
import { EmployeeService } from "../../services/employee.service";
import { Employee } from "../../models/employee";
@component({
selector: 'app-employees',
templateUrl: './employees.component.html',
styleUrls: ['./employees.component.css']
})
export class EmployeesComponent implements OnInit {
employees: Employee[];
constructor(
private employeeService: EmployeeService
) { }`
ngOnInit() {
this.employeeService.getEmployees().subscribe(employees => {
this.employees = employees;
});`
然后我在Chrome控制台上收到此错误
答案 0 :(得分:1)
我有同样的问题,我解决了它降级到以前的版本。我现在使用firebase 4.12.1和angularfire2 5.0.0-rc.6。我实际上降级到以前版本的角度和RxJs以及新版本引入了重大变化,我将不得不使用rxjs-compat包使它工作......这是一个烂摊子。我现在将使用这些版本,直到所有第三方库都添加对新版rxjs的支持。 这是我的package.json:
{
"name": "support-portal",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^5.0.0",
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/forms": "^5.0.0",
"@angular/http": "^5.0.0",
"@angular/platform-browser": "^5.0.0",
"@angular/platform-browser-dynamic": "^5.0.0",
"@angular/router": "^5.0.0",
"angularfire2": "^5.0.0-rc.6",
"core-js": "^2.4.1",
"firebase": "^4.12.1",
"rxjs": "^5.5.2",
"rxjs-compat": "^6.1.0",
"zone.js": "^0.8.14"
},
"devDependencies": {
"@angular/compiler-cli": "^5.0.0",
"@angular-devkit/build-angular": "~0.6.0",
"typescript": "~2.4.2",
"@angular/cli": "~6.0.0",
"@angular/language-service": "^6.0.0",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~1.4.2",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1"
}
}
我希望这可以帮助您启动并运行,但这是一个临时解决方案,我们都应该能够使用最新版本。