CODEWITHSUNDEEP
javascriptangularfirebasefirebase-realtime-databaseangularfire2
PKPrabu
PKPrabu

Reputation: 519

Unable to Update and Delete an Object from Firebase

I'm working on a project in Angular with Firebase. I am unable to Update and Delete an object from Firebase Database.

Here is an Stackblitz Example representing my issue.

component.ts

update(course) {
    this.db.object('/courses/' + course.key ).update(course.value + 'updated');
}

delete(course) {
    this.db.object('/courses/' + course.key ).remove();
}

component.html

<div class="form-group mt-4">
    <input type="text" class="form-control" placeholder="Enter cource..." (keyup.enter)="add(course)" #course>
</div>
<ul class="list-group">
    <li class="list-group-item d-flex justify-content-between align-items-center" *ngFor="let course of course$ | async | keyvalue">{{course.value}} <span><button (click)="update(course)" type="button" class="btn btn-sm btn-outline-success mr-2">Update</button><button (click)="delete(course)" type="button" class="btn btn-sm btn-outline-danger">Delete</button></span></li>
</ul>

Upvotes: 1

Views: 923

Answers (2)

AVJT82
AVJT82

Reputation: 73367

You need to listen to snapshotChanges to get the actual key for the document, which you can refer to when updating (I use set here, since it doesn't require an object) and deleting. So change how you are getting the data. Usually I add the payload data with spread operator, but since your payload is just a string, I added it as a variable payload (you can choose your own name) and store the document id as key:

this.course$ = this.courses.snapshotChanges().pipe(
  map((changes: any) => {
    const data = changes.map(d => ({ key: d.key, payload: d.payload.val()}))
    return data;
  })
)

Then you can use the correct key to update and delete:

update(course) {
  this.db.object('/courses/' + course.key).set(course.payload + ' updated');
}

delete(course) {
  this.db.object('/courses/' + course.key).remove();
}

Then we need to make some changes to the template, we don't need the keyvalue pipe:

<li *ngFor="let course of course$ | async "> {{course.payload}} </li>

Your forked STACKBLITZ

Also do not use any, type your data, makes your life so much easier!!

Upvotes: 2

Frank van Puffelen
Frank van Puffelen

Reputation: 599571

The update() method takes a JavaScript object with key-value pairs.

But in this call you are instead passing a single string value, which is not valid:

this.db.object('/courses/' + course.key ).update(course.value + 'updated');

The fix depends on what you store under /courses/$key in the database.

If your structure under /courses/$key is an object, and looks like this:

"courses": {
  "coursekey": {
    "property1": "value",
    "property2": "value"
  }
}

You can update a specific property with:

this.db.object('/courses/coursekey').update({ property1: 'updated' });

If your structure under /courses/$key is an single value, and looks like this:

"courses": {
  "coursekey": "value"
}

You can update it with:

this.db.object('/courses/coursekey').set('updated');

Upvotes: 0

Related Questions