错误:Reference.child失败:第一个参数是无效路径

时间:2020-02-29 14:17:25

标签: javascript angular firebase firebase-realtime-database angularfire

我有一个带有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>

我已经尝试了数百种不同的方法,看到了教程(变得更加困惑),却一无所获。有人可以解释一下这是怎么回事吗?谢谢

@Frank van Puffelen,这是从Firebase集合中导出的JSON:

{
  "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"
  }
}

2 个答案:

答案 0 :(得分:1)

您似乎正在将p的含义从post更改为id。假设每个post具有一个id属性,您可能想要:

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

答案 1 :(得分:1)

@Frank van Puffelen snapshotChances()是解决方案。此方法从节点返回ID,以在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();
  }