I have been stuck in trying to delete a particular child in my firebase real time database by a button click. A paginator is available with the list of the child i intend to delete on request. Below is how far i have gone.I have tried all possible tutorial online but none seems to work.Either it deletes the entire parent node or it shows a successful message but nothing worked.
<div fxLayout fxLayoutAlign="center center">
<mat-form-field fxFlex="60%">
<input matInput type="text" (keyup)="doFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
</div>
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="key">
<th mat-header-cell *matHeaderCellDef> Action </th>
<td mat-cell *matCellDef="let element" class="action-link">
<a (click)="getID(item)">Approve</a> |
<a (click)='delete(key,element)'>Delete</a>
</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<ng-container matColumnDef="phone">
<th mat-header-cell *matHeaderCellDef mat-sort-header> PhoneNumber </th>
<td mat-cell *matCellDef="let element"> {{element.phone}} </td>
</ng-container>
<ng-container matColumnDef="cartype">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Car Type </th>
<td mat-cell *matCellDef="let element"> {{element.cartype}} </td>
</ng-container>
<ng-container matColumnDef="destination">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Destination</th>
<td mat-cell *matCellDef="let element"> {{element.destination}} </td>
</ng-container>
<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
<td mat-cell *matCellDef="let element"> {{element.date | date: 'dd/MM/yyyy'}} </td>
</ng-container>
<ng-container matColumnDef="time">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Time </th>
<td mat-cell *matCellDef="let element"> {{element.time}} </td>
</ng-container>
<ng-container matColumnDef="location">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Your Location </th>
<td mat-cell *matCellDef="let element"> {{element.location}} </td>
</ng-container>
<ng-container matColumnDef="numberOfPersons">
<th mat-header-cell *matHeaderCellDef mat-sort-header> No of Persons </th>
<td mat-cell *matCellDef="let element"> {{element.numberOfPersons}} </td>
</ng-container>
<ng-container matColumnDef="price">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Trip Price</th>
<td mat-cell *matCellDef="let element"> {{element.price}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSize]="6" [pageSizeOptions]="[2, 4, 6, 10, 20]">
</mat-paginator>
Ts
delete(key) {
this.ph.scheduledRideSingle.remove(key).then(() => {
alert('Success');
});
}
Ph.ts
[![constructor() {
this.scheduledRideSingle = firebase.database().ref(`userProfile/ScheduledRides`);
}
public scheduledRideSingle: any;
You need to use remove()
:
remove
Removes the data at this Database location.
Any data at child locations will also be deleted.
https://firebase.google.com/docs/reference/js/firebase.database.Reference#remove
For example:
var adaRef = firebase.database().ref('users/ada');
adaRef.remove()
.then(function() {
console.log("Remove succeeded.")
})
.catch(function(error) {
console.log("Remove failed: " + error.message)
});
If you want to delete a particular node then do:
firebase.database.ref("userProfile/ScheduledRides").child(key).remove();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.