Question

我是ionic和type / javascript的新手，所以我正在学习。当前，我需要删除一个“事件”，但是当我这样做时，我得到了

的错误

“ null不是对象（评估'_this.currentEvent.is = eventSnapshot.key'）

我知道为什么会收到此错误，但是我不确定该如何处理。在删除页面时，我仍在引用以前从firebase读取的（现在已删除）数据。我已经尝试过诸如

this.navCtrl.pop().then( continue => {
   //delete
});

但仍然没有运气，因为这显然不是可行的解决方法。同样，我仍在学习，所以请不要太用力地烘烤我。我将在下面粘贴我的相关代码：

删除功能所在的EventDetailPage

    <ion-navbar>
        <ion-title>Vehicle Details</ion-title>
        <ion-buttons end>

              <button ion-button icon-only (click)="delete(currentEvent)">

                  <ion-icon name="ios-trash-outline"></ion-icon>
                </button>


          </ion-buttons>
      </ion-navbar>

<ion-card-content text-wrap>
    <h2>Year:
        <strong>{{currentEvent.year}}</strong>
      </h2>
  <h2>Make:
    <strong>{{currentEvent.make}}</strong>
  </h2>
  <h2>Model:
    <strong>{{currentEvent.model}}</strong>
  </h2> <br> 
 <ion-item id = "pic"><img [src] = "currentEvent.img"></ion-item> <br>
  <h2>Additional information: </h2>


  <ion-item *ngIf="currentEvent.data !== null" >
    <p *ngFor="let bit of currentEvent.data" >
    <strong>{{bit}}</strong><br>
  </p> 
</ion-item>

</ion-card-content>

EventDetailPage ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { EventProvider } from '../../providers/event/event';
import { Camera } from '@ionic-native/camera';
import { TabsPage } from '../tabs/tabs';


@IonicPage({
    segment: 'event-detail/:eventId'
})
@Component({
  selector: 'page-event-detail',
  templateUrl: 'event-detail.html'
})
export class EventDetailPage {
 public currentEvent: any = {};
  public guestName: string = '';
  public guestPicture: string = null;
  public onLoad: boolean = true;
  rootPage: any;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public eventProvider: EventProvider,
   public cameraPlugin: Camera
   ) {}

  ionViewDidLoad() {
    if(this.onLoad){
      this.eventProvider
      .getEventDetail(this.navParams.get('eventId'))
      .on('value', eventSnapshot => {
        this.currentEvent = eventSnapshot.val();
        this.currentEvent.id = eventSnapshot.key;
      });
    }else{
      this.rootPage = TabsPage;
    }

  }

 delete(eventId){
   this.onLoad = false;
   this.navCtrl.pop().then(result => {
    return this.eventProvider.delete(eventId.id);
    }).catch(err => {
      alert(err);
          });

}
}

EventProvier ts，不需要某些firebase功能

import { Injectable } from '@angular/core';

import firebase from 'firebase';
import { Reference, ThenableReference } from '@firebase/database-types';
import {storage} from 'firebase';


@Injectable()
export class EventProvider {
  public eventListRef: Reference;
  //public eventListRefKey?: String


  constructor() {
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        this.eventListRef = firebase
          .database()
          .ref(`/userProfile/${user.uid}/eventList`);
      }

    });
  }

  getEventList(): Reference {
    return this.eventListRef;
  }


  createEvent(
    vehYear: string,
    vehMake: string,
    vehModel: string,
    vehVIN: string,
    date: string
  ): ThenableReference {
    return this.eventListRef.push({
      year: vehYear,
      make: vehMake,
      model: vehModel,
      vin: vehVIN,
      date: date
    });
  }

  createArray(
    dataArray: string[],
    vehYear: string,
    vehMake: string,
    vehModel: string,
    vehVIN: string,
    date: string,
    imgResult: string,
  ): ThenableReference{
    this.storeImage(imgResult,vehVIN);
    return this.eventListRef.push({
      data: dataArray,
      year: vehYear,
      make: vehMake,
      model: vehModel,
      vin: vehVIN,
      date: date,
      img: imgResult
    })
  }

  createArrayNoImg(
    dataArray: string[],
    vehYear: string,
    vehMake: string,
    vehModel: string,
    vehVIN: string,
    date: string
  ): ThenableReference{
    return this.eventListRef.push({
      data: dataArray,
      year: vehYear,
      make: vehMake,
      model: vehModel,
      vin: vehVIN,
      date: date,
      img: "https://dy98q4zwk7hnp.cloudfront.net/Dealer-2624-f4ea52f79fddd47068203c3cebc846d0.jpg?type=fit&w=335"
    })
  }

  storeImage(imgResult: string, vin: string){
    const pictures = storage().ref('pictures/'+ vin + '/' + new Date().getTime());
    pictures.putString(imgResult,'data_url');
  }

  getEventDetail(eventId: string): Reference {

    return this.eventListRef.child(eventId);
  }

  delete(eventId: string){
    return this.eventListRef.child(eventId).remove();

  }

  //delete(eventId: string):Reference{
    //return this.eventListRef.remove(eventId);
  //}

}

Answer 1

在.ts中，始终在引用this.currentEvent之前检查this.currentEvent.something：

if(this.currentEvent){
console.log(this.currentEvent.something)
}

在.html中，使用?：

<h2>Year:
    <strong>{{currentEvent?.year}}</strong>
</h2>

或使用ngIf：

<h2>Year:
   <span *ngIf='currentEvent'>
    <strong>{{currentEvent.year}}</strong>
   </span>

</h2>

修改确保您修复此行：

this.currentEvent = eventSnapshot.val();
this.currentEvent.id = eventSnapshot.key;

到

this.currentEvent = eventSnapshot.val();
if(this.currentEvent){
    this.currentEvent.id = eventSnapshot.key;
}

要取消引用Firebase中已删除的数据？

1 个答案: