angularfire2@5.0.0-rc.10 .snapshotChanges() 不能让你得到 doc.payload.doc.data()
Posted
技术标签:
【中文标题】angularfire2@5.0.0-rc.10 .snapshotChanges() 不能让你得到 doc.payload.doc.data()【英文标题】:angularfire2@5.0.0-rc.10 .snapshotChanges() not able to let you get the doc.payload.doc.data() 【发布时间】:2018-11-20 02:40:57 【问题描述】:版本信息
角度: 6.0.4
Firebase: 5.0.3
AngularFire: 5.0.0-rc.10
ng-test-angular6@0.0.0 /home/amine/docker-projects/ng-test-angular6
├── @angular-devkit/build-angular@0.6.8
├── @angular/animations@6.0.4
├── @angular/cli@6.0.8
├── @angular/common@6.0.4
├── @angular/compiler@6.0.4
├── @angular/compiler-cli@6.0.4
├── @angular/core@6.0.4
├── @angular/forms@6.0.4
├── @angular/http@6.0.4
├── @angular/language-service@6.0.4
├── @angular/platform-browser@6.0.4
├── @angular/platform-browser-dynamic@6.0.4
├── @angular/router@6.0.4
├── @types/jasmine@2.8.8
├── @types/jasminewd2@2.0.3
├── @types/node@8.9.5
├── angularfire2@5.0.0-rc.10
├── codelyzer@4.2.1
├── core-js@2.5.7
├── firebase@5.0.3
├── jasmine-core@2.99.1
├── jasmine-spec-reporter@4.2.1
├── karma@2.0.2
├── karma-chrome-launcher@2.2.0
├── karma-coverage-istanbul-reporter@2.0.1
├── karma-jasmine@1.1.2
├── karma-jasmine-html-reporter@0.2.2
├── protractor@5.3.2
├── rxjs@6.2.0
├── ts-node@5.0.1
├── tslint@5.9.1
├── typescript@2.7.2
└── zone.js@0.8.26
如何重现这些情况
看看the angular project ng-angular6-angularfire5.0.0-rc.10
只需克隆、安装和服务。
调试输出
问题来自该行中的函数L20
fetchAvailableExercices()
this.db.collection('availablesExercices')
.snapshotChanges()
.pipe(map( docArray =>
return docArray.map( doc =>
console.log(doc);
return(
id: doc.payload.doc.id,
name: doc.payload.doc.data().name,
duration: doc.payload.doc.data().duration,
calories: doc.payload.doc.data().calories,
//doc
);
);
))
.subscribe(exercices =>
this.availableExercices = exercices;
this.availableExercicesChanged.next([...this.availableExercices]);
);
我得到的错误是:
Property 'name' does not exist on type ''.
Property 'duration' does not exist on type ''.
Property 'calories' does not exist on type ''.
另外,我无法构建 Angular 应用程序的 prod 版本ng build --prod
但是,如果我按原样获取文档(没有设置名称、持续时间、卡路里),我可以让浏览器控制台获得预期值:
> temp1.payload.doc.data()
calories: 8, duration: 60, name: "Burpees"
fetchAvailableExercices()
this.db.collection('availablesExercices')
.snapshotChanges()
.pipe(map( docArray =>
return docArray.map( doc =>
console.log(doc);
return(
doc
);
);
))
.subscribe(exercices =>
this.availableExercices = exercices;
this.availableExercicesChanged.next([...this.availableExercices]);
);
预期行为
以下错误Property 'name' does not exist on type ''.
必须消失。
制作产品必须成功
PS: AngularFire:5.0.0-rc.8 不抛出错误消息Property 'name' does not exist on type ''.
。然而,它无法构建 Angular 应用程序的 prod 版本。
ng build --prod
Date: 2018-06-10T20:10:08.203Z
Hash: 3395c915a85b5198ef71
Time: 4427ms
chunk 0 runtime.a66f828dca56eeb90e02.js (runtime) 1.05 kB [entry] [rendered]
chunk 1 styles.d651e93934b267387a12.css (styles) 56.5 kB [initial] [rendered]
chunk 2 polyfills.cdf87a8e5b31fe8a11f1.js (polyfills) 130 bytes [initial] [rendered]
chunk 3 main.a2bc6cab25d0aa41c17a.js (main) 128 bytes [initial] [rendered]
ERROR in Error during template compile of 'AppModule'
Function calls are not supported in decorators but 'AngularFireModule' was called.
【问题讨论】:
尝试阅读此符号中的属性,看看是否有效doc.payload.doc.data()['name']
效果很好。谢谢@TroyMyers
【参考方案1】:
您项目中的 angularfire2 和 firebase 版本存在一些问题。
这是我为使事情正常工作所做的:
npm i angularfire2@5.0.0-rc.10 --save
npm i firebase@5.0.4 --save
在您的data.service.ts
中:输入db.collection()
电话
fetchAvailableExercices()
this.db.collection<IExercice>('availablesExercices') // <== This line
.snapshotChanges()
.pipe(map( docArray =>
return docArray.map( doc =>
console.log(doc);
return(
id: doc.payload.doc.id,
name: doc.payload.doc.data().name,
duration: doc.payload.doc.data().duration,
calories: doc.payload.doc.data().calories,
);
);
))
.subscribe(exercices =>
this.availableExercices = exercices;
this.availableExercicesChanged.next([...this.availableExercices]);
);
您的app.module
中还有两句话:
AngularFireStore
属性错误消失了,构建工作正常。 Working example here
【讨论】:
【参考方案2】:使用新版本的AngularFire,代码变为:
fetchAvailableExercices()
this.db.collection('availablesExercices')
.snapshotChanges()
.pipe(map( docArray =>
return docArray.map( doc =>
console.log(doc);
return(
id: doc.payload.doc.id,
name: doc.payload.doc.data()['name'],
duration: doc.payload.doc.data()['duration'],
calories: doc.payload.doc.data()['calories'],
//doc
);
);
))
.subscribe(exercices =>
this.availableExercices = exercices;
this.availableExercicesChanged.next([...this.availableExercices]);
);
构建产品应用程序将很简单。
【讨论】:
以上是关于angularfire2@5.0.0-rc.10 .snapshotChanges() 不能让你得到 doc.payload.doc.data()的主要内容,如果未能解决你的问题,请参考以下文章