возвращение значения ключа firebase не определено

Question

Я пытаюсь отобразить список событий с помощью кнопки удаления и может быть удален только создателем события. но когда я пытаюсь удалить его, он удаляет все остальные события вместе с ним. Я на самом деле пытаюсь удалить по значению ключа из firebase-realtime-database, но event.id возвращается как неопределенное, я думаю, что вместо этого удаляется вся папка.

Мой home.html, отображает данные и может напрямую удалить с этой страницы

<ion-card *ngFor="let event of eventList$ | async">
  <ion-item>
    <h4>{{event.name}}</h4>
  </ion-item>

  <ion-item>
    <h4>{{event.location}}</h4>

    <ion-buttons end>
      <button ion-button icon-only (click)="checkUser(event)">
        <ion-icon name="trash"></ion-icon>
      </button>
  </ion-buttons>
  </ion-item>

</ion-card>

Мой дом.тс

this.database.list<EventModels>('event-list').valueChanges().subscribe((eventData) => { 

  }, (err)=>{
 console.log("Error while retrieving event details : ", err);
  }); 

  this.eventListRef$ = this.database.list<EventModels>('event-list');
  this.eventList$ = this.eventListRef$.valueChanges();

checkUser(event: EventModels) {
  console.log(event.id, event.name);
  if(firebase.auth().currentUser.email == event.creator) {
    let alert = this.alertCtrl.create({
      title: 'Confirm Delete.',
      message: 'You cannot recover this event once it is deleted.',
      buttons: [
        {
          text: 'Yes',
          role: 'destructive',
          handler: () => {
            this.eventListRef$.remove(event.id);
          }
        },
        {
          text: 'Cancel',
          role: 'cancel'
        }
      ]
    }).present();
  } else{
    let alert = this.alertCtrl.create({
      title: 'Could Not Delete Event!',
      subTitle: 'This event does not belong to you.',
      buttons: ['Dismiss']
    });
    alert.present();
  }
}

Мои EventModels, events.ts в папке моделей

export interface EventModels {
  id?: string;
  creator: any;
  name: string;
  location: string;
  start: any;
  end: any;
  time: any;
}

Я пытался использовать $key?: String, но он все еще возвращал неопределенный

Создание события

addEvent = {} as EventModels;
eventRef$: AngularFireList<EventModels>;

  this.eventRef$ = this.database.list('event-list');

  save(addEvent: EventModels){
    this.eventRef$.push({
      creator: firebase.auth().currentUser.email,
      name: this.addEvent.name,
      location: this.addEvent.location,
      start: this.addEvent.start,
      end: this.addEvent.end,
      time: this.addEvent.time,
    });

    this.addEvent = {} as EventModels;

    this.navCtrl.pop()
  }

Answer 1

Попробуйте изменить способ создания eventList$ в home.ts вместо использования snapshotChanges () для извлечения key каждого элемента и присвоения свойству id:

// ...

import { map } from 'rxjs/operators';

// ...

this.eventListRef$ = this.database.list<EventModels>('event-list');
this.eventList$ = this.eventListRef$.snapshotChanges()
  .pipe(
    map(changes => 
      changes.map(c => ({ id: c.payload.key, ...c.payload.val() }))
    )
  );

Похоже, что id не может быть свойством, которое существует для каждого дочернего элемента в вашем узле event-list RTDB. snapshotChanges() предоставляет метаданные, такие как key для каждого объекта, а также значения объекта, которые можно использовать для создания полного объекта EventModels для каждого элемента.

Надеюсь, это поможет!