距离我上次处理Angular和Firebase已经过去了很多时间，我在尝试使用AngularFire 2从Firestore集合中检索整个对象时发现了以下简单问题(这意味着文档ID+必须放入模型对象的文档数据(。
这就是我的处境。
首先，这是我的包.json文件：
{
"name": "fintness-tracker",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "~13.3.0",
"@angular/cdk": "^13.3.8",
"@angular/common": "~13.3.0",
"@angular/compiler": "~13.3.0",
"@angular/core": "~13.3.0",
"@angular/flex-layout": "^13.0.0-beta.38",
"@angular/forms": "~13.3.0",
"@angular/material": "^13.3.8",
"@angular/platform-browser": "~13.3.0",
"@angular/platform-browser-dynamic": "~13.3.0",
"@angular/router": "~13.3.0",
"angularfire2": "^5.4.2",
"firebase": "^7.24.0",
"hammerjs": "^2.0.8",
"rxjs": "~7.5.0",
"rxjs-compat": "^6.6.7",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~13.3.6",
"@angular/cli": "~13.3.6",
"@angular/compiler-cli": "~13.3.0",
"@types/jasmine": "~3.10.0",
"@types/node": "^12.11.1",
"jasmine-core": "~4.0.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.1.0",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.6.2"
}
}
然后我有一个简单的练习模型界面，它将映射Firebase文档：
export interface Exercise {
id: string;
name: string;
duration: number;
calories: number;
date?: Date;
state?: 'completed' | 'cancelled' | null;
}
最后是我的NewTrainingComponent角度组件类，在其ngOnInit((中
import { Component, OnInit, EventEmitter, Output } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Exercise } from '../exercise.model';
import { TrainingService } from '../training.service';
import { AngularFirestore } from 'angularfire2/firestore';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Component({
selector: 'app-new-training',
templateUrl: './new-training.component.html',
styleUrls: ['./new-training.component.css']
})
export class NewTrainingComponent implements OnInit {
@Output()
trainingStart:EventEmitter<void> = new EventEmitter<void>();
//exercises: Exercise[] = [];
exercises: Observable<any>;
constructor(private trainingService: TrainingService,
private db: AngularFirestore) { }
ngOnInit(): void {
//this.exercises = this.trainingService.getAvailableExercises();
//this.exercises = this.db
this.db
.collection("availableExercises")
.snapshotChanges()
.pipe(
map((docArray) => {
return docArray.map((doc) => {
return {
id: doc.payload.doc.id,
...(doc.payload.doc.data() as Exercise),
};
});
})
)
.subscribe(result => {
console.log(result);
});
/*
this.db.collection('availableExercises').valueChanges().subscribe(result => {
console.log(result);
})
*/
}
onStartTraining(form: NgForm) {
this.trainingService.startExercise(form.value.exercise);
}
}
问题出在哪里？
问题是，当我试图以这种方式创建我的模型对象时：
return {
id: doc.payload.doc.id,
...(doc.payload.doc.data() as Exercise),
};
它在我的IDE上的id属性上给了我以下错误：
"id"被指定了多次，因此此用法将重写.ts(2783(
编译时我得到了相同的错误：
Error: src/app/training/new-training/new-training.component.ts:38:15 - error TS2783: 'id' is specified more than once, so this usage will be overwritten.
38 id: doc.payload.doc.id,
~~~~~~~~~~~~~~~~~~~~~~
src/app/training/new-training/new-training.component.ts:39:15
39 ...(doc.payload.doc.data() as Exercise),
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
This spread always overwrites this property.
Error: src/app/training/new-training/new-training.component.ts:38:15 - error TS2783: 'id' is specified more than once, so this usage will be overwritten.
38 id: doc.payload.doc.id,
~~~~~~~~~~~~~~~~~~~~~~
src/app/training/new-training/new-training.component.ts:39:15
39 ...(doc.payload.doc.data() as Exercise),
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
This spread always overwrites this property.
✖ Failed to compile.
如果我删除此属性并使用：
return {
//id: doc.payload.doc.id,
...(doc.payload.doc.data() as Exercise),
};
我没有得到任何错误，但当console.log((打印出我的结果时，它不包含id属性。
为什么？我的代码出了什么问题？我错过了什么？我该如何修复它？
这是因为在Exercice接口中有一个id属性。
根据这个SO答案，按如下顺序切换应该可以做到这一点(我没有测试(：
return {
...(doc.payload.doc.data() as Exercise),
id: doc.payload.doc.id
};