时间戳

首页 > 解决方案 > 无法从 Angular 应用页面按 id 删除 Firestore 文档

angular - 无法从 Angular 应用页面按 id 删除 Firestore 文档

问题描述

我正在尝试从我的 Angular Web 应用程序中按 id 删除一个 Firestore 文档，但无法这样做。

.ts 文件

deleteStory(docId)
{
  console.log("Doc id :", +docId);
  this.storiesRef.doc(docId).delete().then(function() {
    console.log("Document successfully deleted!");
  }).catch(function(error) {
    console.error("Error removing document: ", error);
  });
}

  ngOnInit() {
    const container = document.getElementById('container');

    this.afs.collection('stories', ref => ref.where('userid', '==', this.userId))
      .get().toPromise()
      .then(snapshot => {
        snapshot.forEach(doc => {
          var date = doc.data() && doc.data().time && doc.data().time.toDate();

          //Create a card element
          const card = document.createElement('div');
          //  card.classList.add('card-body');
          //Construct card content
          const content = ` 

                  <div data-parent="#storycontainer" style="width: 27rem;" class ="mx-auto mb-3">
                    <div class="card">
                        <div class="card-body">

                        <h5 class="card-title">${doc.data().storytitle}</h5>

                    <audio _ngcontent-cjb-c49="" controls="">
                      <source _ngcontent-cjb-c49="" type="audio/webm"
                        src=${doc.data().readyfilepath}>
                      </audio>
                      <p class ="text-sm-left">${date}</p>
                      <button class="btn btn-danger" (click)="deleteStory(${doc.id})">
                        <span class="glyphicon glyphicon-record"></span>Delete
                      </button>
                
                      </div>
                      </div>                
                  </div>
                
                  `;
          // Append newyly created card element to the container
          container.innerHTML += content;

单击 html 按钮时，我在浏览器控制台中看不到任何错误。任何帮助将非常感激。

标签： angularfirebasegoogle-cloud-firestore

解决方案

谢谢，我在网上做了一些搜索，下面的代码帮助了我......

.ts

      <button class="btn btn-secondary rounded-circle" (click)="delete(story.payload.doc.id)">
        <span class="fa fa-trash" aria-hidden="true"></span>
      </button>

.html

delete(id: string){
  this.storiesService.deleteStory(id)
  .then(
    res => {
      this.router.navigate(['/dashboard']);
    },
    err => {
      console.log(err);
    }
  )
}

}

推荐阅读