Angular 无法从应用程序页面按id删除firestore文档

我正在尝试从我的angular webapp中按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;

deleteStory（docId）
{
console.log（“文档id:，+docId”）；
this.storiesRef.doc（docId）.delete（）.then（function（））{
log（“文档已成功删除！”）；
}).catch（函数（错误）{
console.error（“删除文档时出错：”，错误）；
});
}
恩戈尼尼特（）{
const container=document.getElementById（'container'）；
this.afs.collection（'stories'，ref=>ref.where（'userid'，'=='，this.userid））
.get（）.toPromise（））
。然后（快照=>{
snapshot.forEach（doc=>{
var date=doc.data（）&&doc.data（）.time&&doc.data（）.time.toDate（）；
//创建一个卡片元素
const card=document.createElement（'div'）；
//card.classList.add（'card-body'）；
//构建卡片内容
常量内容=`
${doc.data（）.storytitle}
${date}
删除
`;
//将新创建的卡片元素附加到容器中
container.innerHTML+=内容；

---

当我点击html按钮时，我在浏览器控制台中没有看到任何错误。任何帮助都将不胜感激。

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

.ts

---

您是否在控制台中单击按钮时获得文档id？不，令人惊讶的是，我没有在控制台中打印它。您的html代码中有一些错误，您必须共享更多代码才能理解您的问题谢谢pepe，我已更新了.ts代码。实际上，我是从.ts组件中创建html按钮的。为什么您要创建从ts文件中删除html元素？

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

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

}