无法从 Angular 应用页面按 id 删除 Firestore 文档答案

【问题标题】：Unable to delete a firestore doc by id from angular app page无法从 Angular 应用页面按 id 删除 Firestore 文档
【发布时间】：2020-07-07 05:59:17
【问题描述】：

我正在尝试从我的 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 按钮时，我在浏览器控制台中没有看到任何错误。任何帮助将不胜感激。

【问题讨论】：

您在单击按钮时是否在控制台中获取 Doc id。？！
不，令人惊讶的是我没有在控制台中打印出来。
你的html代码有错误，你必须分享更多的代码来理解你的问题
感谢 pepe，我已经更新了 .ts 代码。实际上我是在 .ts 组件中创建 html 按钮。
为什么要从 ts 文件创建 html 元素？

标签： angular firebase google-cloud-firestore

【解决方案1】：

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

.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);
    }
  )
}

}

【讨论】：