删除 Firebase 对象时无法读取未定义的属性'id'

Question

删除firebase对象时出现以下错误

TypeError:无法读取未定义的属性"id"在ScheduleService.push../src/app/schedule.service.ts.ScheduleService.deleteSchedule(schedule.service.ts:37(

我检查对象以确保属性上存在id。

｛"约会日期"：｛"秒"：1544677200，"纳秒"：0｝，"appointment_hour"："01:00 pm"，"id"："JKD3spgb8qtMX97XhjLG"，"name"："Barnny"}

我最终想从firebase集合中删除一个对象。

时间表服务

import { Injectable } from '@angular/core';
import { Schedule } from './models/schedule.model';
import { Observable } from 'rxjs';
import { map } from "rxjs/operators";
import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';
import { AngularFirestore,AngularFirestoreDocument, AngularFirestoreCollection } from '@angular/fire/firestore';
@Injectable({
providedIn: 'root'
})
export class ScheduleService {
formData: Schedule;
schedules: Observable<Schedule[]>;
scheduleList: AngularFirestoreDocument<Schedule>;
scheduleCollection: AngularFirestoreCollection<Schedule>;
constructor(private db: AngularFireDatabase, private firestore: AngularFirestore) {
this.scheduleCollection = this.firestore.collection('schedules');
this.schedules = this.scheduleCollection.snapshotChanges().pipe(map(changes =>{
return changes.map(a =>{
const data = a.payload.doc.data() as Schedule;
data.id = a.payload.doc.id;
return data;
});
}));
}
// ignore that code it doesnt work lol

getAppointments(){
return this.schedules;
}
deleteSchedule(schedule: Schedule) {
this.scheduleList = this.firestore.doc(`schedules/${schedule.id}`);
this.scheduleList.delete();
}

计划列表.组件.ts

import { Component, OnInit } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { ScheduleService } from '../schedule.service';
import { Schedule } from '../models/schedule.model';
@Component({
selector: 'app-schedule-list',
templateUrl: './schedule-list.component.html',
styleUrls: ['./schedule-list.component.css']
})
export class ScheduleListComponent implements OnInit {
list:Schedule[];
constructor(private firestore: AngularFirestore, private service: ScheduleService ) { }
ngOnInit() {
this.service.getAppointments().subscribe(schedules => {
//console.log(list);
this.list = schedules;
});
}
deleteSchedule(event, schedule) {
const response = confirm('are you sure you want to delete?');
if (response ) {
this.service.deleteSchedule(schedule);
}
return;
}

型号.ts

export class Schedule {
id:string;
name:string;
appointment_date:string;
appointment_hour: string;
}

schedule-list.component.html

<div class="container ">
<div class="row">
<div *ngFor="let appoint of list" class="col-md-8 myCenter mt-2"> 
<!-- the bottom code should work if items within list exist. -->
<div class="card">
<div class="card-header">
Name: {{appoint.name}}
<a href="#" class="secondary-content float-right">
<i (click)="deleteSchedule($event, schedule)" class="fa fa-trash"></i>
</a>
</div>
<div class="card-body">
<span><small>Appointment Set:</small></span><p>{{ appoint.appointment_date.toDate() | date: 'MM/dd/yyyy' }}</p>
<span><small>Time:</small></span><p>{{ appoint.appointment_hour }}</p>
<span> {{ appoint | json }}</span>
</div>
</div>
</div>
</div>
</div>

Answer 1

如果我读对了所有内容。

循环这个：*ngFor="let appoint of list"。

然后发送时间表。<i (click)="deleteSchedule($event, schedule)" class="fa fa-trash"></i>

应为：

<i (click)="deleteSchedule($event, appoint)" class="fa fa-trash"></i>