Angular 4 allows for the deletion of specific row data from Firebase

Question

Angular 4 allows for the deletion of specific row data from Firebase

I'm currently working on an Angular 4 project and I need to be able to delete a row from Firebase when it's clicked.

Here is the code for my smart table:

<ng2-smart-table [settings]="settings" [source]="source" (edit)="onEdit($event)" (delete)="onDelete($event)">
    </ng2-smart-table>

The onDelete() function looks like this:

onDelete(event) {
console.log(event);
if (window.confirm('Are you sure you want to delete?')) {
this.service.deleteEnquiry(event.data);
} else {
event.confirm.reject();
}
}

I've implemented the deleteEnquiry function in the service as shown below:

deleteEnquiry(data){
console.log(data);
this.af.list('/enquirydata/').remove(data);
}

However, I'm encountering an issue where it's not working and displaying the following error in the console:

ERROR Error: Expects a string, snapshot, or reference.

Can anyone offer some assistance?

typescript firebase firebase-realtime-database angularfire2 smart-table

Answer 1

Answer №1

give this a shot

removeInquiry(info){
    console.log(info.$id);
    this.db.list(`/inquiry/${info.$id}`).delete(info);
 }

Answer 2

give this a shot

removeInquiry(info){
    console.log(info.$id);
    this.db.list(`/inquiry/${info.$id}`).delete(info);
 }

Answer 3

Answer №2

Make sure to pass the event.value when calling the service function in your onDelete method.

 onDelete(event) {
  console.log(event.value);
  if (window.confirm('Are you sure you want to delete?')) {
    this.service.deleteEnquiry(event.value);
  } else {
    event.confirm.reject();
  }
 }

Update your service code as follows:

 deleteEnquiry(data){
    console.log(data.$key);
    this.af.list(`/enquirydata/${data.$key}`).remove(data);
  }

Answer 4

Make sure to pass the event.value when calling the service function in your onDelete method.

 onDelete(event) {
  console.log(event.value);
  if (window.confirm('Are you sure you want to delete?')) {
    this.service.deleteEnquiry(event.value);
  } else {
    event.confirm.reject();
  }
 }

Update your service code as follows:

 deleteEnquiry(data){
    console.log(data.$key);
    this.af.list(`/enquirydata/${data.$key}`).remove(data);
  }

Answer 5

Answer №3

Make sure to also take a look at this document: https://github.com/angular/angularfire2/blob/master/docs/rtdb/lists.md

The Function of snapshotChanges() What does it do? - It provides an Observable containing data in the form of a synchronized array of AngularFireAction[].

Why would you use this feature? - If you require a list of data while retaining associated metadata. The metadata includes the underlying DatabaseReference and snapshot key, which can be beneficial for data manipulation tasks. This function enhances compatibility with other Angular features like ngrx, forms, and animations thanks to its type property. The type property within each AngularFireAction is particularly valuable for ngrx reducers, form states, and animation states.

When should you avoid using it? - If you need a more intricate data structure than an array or if real-time processing of changes is necessary. This array remains synchronized with both remote and local modifications on the Firebase Database.

Answer 6

Make sure to also take a look at this document: https://github.com/angular/angularfire2/blob/master/docs/rtdb/lists.md

The Function of snapshotChanges() What does it do? - It provides an Observable containing data in the form of a synchronized array of AngularFireAction[].

Why would you use this feature? - If you require a list of data while retaining associated metadata. The metadata includes the underlying DatabaseReference and snapshot key, which can be beneficial for data manipulation tasks. This function enhances compatibility with other Angular features like ngrx, forms, and animations thanks to its type property. The type property within each AngularFireAction is particularly valuable for ngrx reducers, form states, and animation states.

When should you avoid using it? - If you need a more intricate data structure than an array or if real-time processing of changes is necessary. This array remains synchronized with both remote and local modifications on the Firebase Database.

Angular 4 allows for the deletion of specific row data from Firebase

Answer №1

Answer №2

Answer №3

Similar questions

Retrieve the code from the Firebase console that was previously deployed

Leveraging Array.map within Angular Interpolation

When converting a PDF to a PNG, the precious data often disappears in the process

Issue with Angular not functioning properly in IE 11 across both production and development builds

Setting up WebPack for TypeScript with import functionality

Tips for effectively updating multiple selection options from a component

How can I center align my loader inside app-root in Angular2+?

Using Material UI with React and TypeScript

mongodb is experiencing issues with the findOneAndUpdate operation

What is the best way to send a variable to an arrow function?

NodeJS code encountered an issue while attempting to send a cloud notification

Using Angular template to embed Animate CC Canvas Export

Choose a Superclass or Interface for your Subclass

Sequelize's bulk synchronization process is ineffective

I encountered an issue while trying to implement a custom pipe using the built-in pipe

Detecting parent changes in Angular 2 child components

Flashing Screens with Ionic 2

unable to locate package "@angular/material"

Using Vue with Typescript to leverage generics for interfaces

Unable to utilize AgmMarkerSpiderModule