删除 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”，“姓名”： “谷仓”}

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

schedule.service

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();
  }

schedule-list.component.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;
  }

Model.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>