Question

在我的应用程序中，我创建了一个表，其中包含来自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>

因此，当我添加或删除对象时，需要直接更新表。

Answer 1

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

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

在delete方法中，您需要重新调用getRowsData()

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

它将刷新表数据。

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

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

从Firebase中删除行后重新加载表

2 个答案: