Ошибка: Reference.child не удалось: первый аргумент был неверный путь

Question

У меня есть небольшое приложение с Firebase, и я внедряю операции CRUD. Проблема возникает, когда я должен удалить сообщение. Я получаю эту ошибку: Error: Reference.child failed: First argument was an invalid path

Вот код службы:

createReview(review) {
  return this.db.list('/reviews').push(review)
}

getReviews(){
  return this.db.list('/reviews');
}

deleteReview(id:any){
  console.log(id)
  this.db.object('/reviews/' + id).remove();
}

Компонент TS

 delete(review) {
    console.log(review)
    this.movieService.deleteReview(review)
  }

HTML

  <div *ngIf="userReviews">
  <ul class="list-group" style="color:black" *ngFor="let r of userReviews">

    <li class="list-group-item">
     <p  class="font-weight-bold text-left">{{r.movie}}</p>
      <div class="img-wrapper">
      <img class="img-fluid" src="{{ r.poster }}" alt="{{ r.poster }}" />
    </div>
      <br>
      <p  class="font-weight-bold text-left"> {{r.review}}</p>

      <span  class="bottom font-weight-bold text-left">by </span><span  class="font-italic">{{r.author}} </span>
      <button (click)="delete(r)" class="btn btn-danger">Delete</button>
    </li>
  </ul>
</div>

Я пробовал сотни разных подходов, видел учебники (стал еще более запутанным) и ничего. Может кто-нибудь объяснить мне, как это работает? Спасибо

@ Фрэнк ван Пуффелен, это экспорт JSON из коллекции Firebase:

{
  "reviews" : {
    "-M1R0vU4PksYuf_0TiKc" : {
      "author" : "murphy",
      "movie" : "Rambo",
      "poster" : "https://m.media-amazon.com/images/M/MV5BMTI5Mjg1MzM4NF5BMl5BanBnXkFtZTcwNTAyNzUzMw@@._V1_SX300.jpg",
      "review" : "Arrow and bow"
    },
    "-M1R1xTntiR-qc4A6huw" : {
      "author" : "murphy",
      "movie" : "Sub Zero",
      "poster" : "https://m.media-amazon.com/images/M/MV5BMTI3MzE3MjUzN15BMl5BanBnXkFtZTcwNTcyMjEzMQ@@._V1_SX300.jpg",
      "review" : "must be chilli"
    }
  },

РЕДАКТИРОВАТЬ: пакет. JSON @Frank van Puffelen

{
  "name": "MoviesDB",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.1.0",
    "@angular/common": "~8.1.0",
    "@angular/compiler": "~8.1.0",
    "@angular/core": "~8.1.0",
    "@angular/fire": "^5.4.2",
    "@angular/forms": "~8.1.0",
    "@angular/http": "^7.2.15",
    "@angular/platform-browser": "~8.1.0",
    "@angular/platform-browser-dynamic": "~8.1.0",
    "@angular/router": "~8.1.0",
    "@auth0/angular-jwt": "^3.0.1",
    "@fortawesome/angular-fontawesome": "^0.5.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.27",
    "@fortawesome/free-solid-svg-icons": "^5.12.1",
    "@ng-bootstrap/ng-bootstrap": "^5.1.4",
    "angular-jwt": "^0.1.11",
    "angular2-jwt": "^0.2.3",
    "bootstrap": "^4.4.1",
    "firebase": "^7.9.1",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^5.8.1",
    "ng-starrating": "^1.0.11",
    "ng2-validation": "^4.2.0",
    "ngx-embed-video": "^1.0.4",
    "rxjs": "~6.4.0",
    "rxjs-compat": "^6.5.3",
    "simple-oauth2": "^3.1.0",
    "source-map": "^0.7.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.801.3",
    "@angular/cli": "~8.1.0",
    "@angular/compiler-cli": "~8.1.0",
    "@angular/language-service": "~8.1.0",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.2.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }
}

Answer 1

@ Фрэнк ван Пафелен снимокChances () был решением. Этот метод возвращает идентификатор узла для удаления в firebase. Итак, в сервисе я получаю такие отзывы:

getReviews() {
    return this.db.list('/reviews').snapshotChanges();
  }

И HTML должно быть

 <button (click)="delete(r.key)" class="btn btn-danger">Delete</button>

И обратно в сервис метод удаления:

deleteReview(id: any) {
    console.log(id)
    this.db.object('reviews/' + id).remove();
  }

Answer 2

Вы, кажется, меняете значение p с post на id. Предполагая, что у каждого post есть свойство id, вы, вероятно, захотите:

delete(post) {
  this.postService.deletePost(post.id)
}