在 Angular 中，我需要从我的视图页面中删除项目，而不是从 Firebase 数据库中删除。对此有什么建议吗？

Question

这是我在 component.ts 文件中的删除函数：

delete() {
  this.firebaseService.deleteUser(this.item.id)
  .then(
    res => {
      this.router.navigate(['/home']);
    },
    err => {
      console.log(err);
    }
  )
}

这是我的服务文件功能

deleteUser(userKey) {
  return this.db.collection('users').doc(userKey).delete();
}

Answer 1

您还可以在用户点击删除按钮时根据id从数组中删除数据。参考 StackBlitz Link is。在这里，array.splice() 很有用，根据删除的数组，您可以根据过滤数据进行更多操作。

data  = [
   {id:1, name:'pencil'},
   {id:2,name:'pen'},
   {id:3, name:'stationary'}
]

delete(id,index){
   this.removeObjectIs = this.data.splice(index,1);
}

并且模板文件是...

<table class="table table-dark">
   <thead>
       <tr>
          <th scope="col">ID</th>
          <th scope="col">Name</th>
          <th scope="col" style="text-align:center">Action</th>
       </tr>
   </thead>
   <tbody>
        <tr *ngFor="let data of data index as i"> 
            <th scope="row">{{data.id}}</th>
               <td>{{data.name}}</td>
               <td style="text-align:center; color:brown; cursor:pointer" >
                    <i (click)="delete(data.id,i)" class="fas fa-trash-alt"></i>
                </td>
        </tr>
   </tbody>
</table>
  <div class="alert alert-danger" *ngIf="removeObjectIs.length >= 1"> Removed ID is : {{removeObjectIs |json}}</div>

在 Angular 中，我需要从我的视图页面中删除项目，而不是从 Firebase 数据库中删除。对此有什么建议吗？

In Angular I need to delete item from my view page but not from Firebase database. Any suggestions for this?

crud

firebase

angular