从firebase中删除行后重新加载表答案

【问题标题】：Reload table after removing row from firebase从firebase中删除行后重新加载表
【发布时间】：2019-05-02 05:23:39
【问题描述】：

在我的应用程序中，我创建了一个包含来自 firebase 对象的所有数据的表。当我从表中删除一行时，我需要手动刷新页面，是否有可能自动执行此操作？当我将对象添加到数据库时，同样的问题，如果我想看到它，我需要刷新页面。

这是我获得所有治疗的服务中的功能：

  receiveTreatment(){
      this.treatmentsRef = this.db.list('/treatments');
      this.treatments$ = this.treatmentsRef.valueChanges();
      this.treatments$.subscribe(res=> this.allTreatments = res);
      console.log(this.allTreatments);
      return this.allTreatments;
  }

这是我在服务中的增删改查功能：

  addTreatment(data){
    console.log(data[0].desc);
    this.generateId();
    this.db.object('/treatments/' + this.uniqueId).set({
      id: this.uniqueId,
      desc: data[0].desc,
      cost: data[0].cost,
      btw: data[0].btw,
      sub: data[0].category,
      time: data[0].time
    });
  }

  deleteTreatment(id){
    this.db.object('/treatments/'+ id).remove();
  }

组件看起来像：

  constructor(private db: AngularFireDatabase, public settings: SettingsService) { 

  }

  ngOnInit() {
    this.products = this.settings.receiveTreatment();
    console.log(this.products);

  }

  deleteTreatment(id){
    console.log(id);
    this.settings.deleteTreatment(id);
  }

这是渲染的表格：

<table style="width:100%">
                    <tr>
                      <th>Behandeling</th>
                      <th>Kosten</th>
                      <th>Btw</th> 
                      <th>Tijd</th>
                      <th>Categorie</th>
                    </tr>
                    <tr *ngFor="let product of products">
                      <td>{{product.desc}}</td>
                      <td>{{product.cost}} euro</td>
                      <td>{{product.btw}} %</td>
                      <td>{{product.time}} minuten</td>
                      <td>{{product.sub}} </td>
                      <td><a (click)="deleteTreatment(product.id)">verwijder</a></td>
                    </tr>

                  </table>

所以当我添加或删除一个对象时，它需要直接更新表。

【问题讨论】：

如果您使用 db.list() 填充 UI，通常应该自动刷新 UI。您共享的代码没有显示您如何填充表格，因此必须说明如何在数据更改时重新填充表格。
我在下面发表了评论，所以你可以看看，我认为它应该自己填充，但那不起作用。你能看出我做错了什么吗？
点击下方的编辑链接，在您的问题中添加其他信息。不要将其添加为单独的答案，因为这会混淆系统。

标签： javascript angular firebase firebase-realtime-database

【解决方案1】：

编写一个获取所有行数据的函数。

getRowsData()
{
//write logics here to get
}

在删除方法中，需要调用getRowsData()

deleteTreatment(id){
    this.db.object('/treatments/'+ id).remove();
    this.getRowsData()
  }

它会刷新表格数据。

【讨论】：

【解决方案2】：

我刚刚解决了这个问题。在服务中，我从这里更改了接收功能：

  receiveTreatment(){
      this.treatmentsRef = this.db.list('/treatments');
      this.treatments$ = this.treatmentsRef.valueChanges();
      this.treatments$.subscribe(res=> this.allTreatments = res);
      console.log(this.allTreatments);
      return this.allTreatments;
  }

到这里：

  receiveTreatment(){
      this.treatmentsRef = this.db.list('/treatments');
      this.treatments$ = this.treatmentsRef.valueChanges();

      return this.treatments$;
  }

之后，我在组件的构造函数中订阅了 treaments$，例如：

  constructor(private db: AngularFireDatabase, public settings: SettingsService) { 
    this.settings.receiveTreatment().subscribe( res => {this.products = res});
  }

现在可以实时更新我的表格了。

【讨论】：