从firebase中删除数据后，它仍然显示在angula 4的表格中

import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';

@Component({
  selector: 'app-data-table',
  templateUrl: './data-table.component.html',
  styleUrls: ['./data-table.component.css']
})
export class DataTableComponent implements OnInit {
  dataSource: any[];

  constructor(private db: AngularFireDatabase) { }

  ngOnInit() {
    // 从Firebase获取数据并存储在数据源数组中
    this.db.list('/data').valueChanges().subscribe(data => {
      this.dataSource = data;
    });
  }

  deleteData(data: any) {
    // 从Firebase删除数据
    this.db.object(`/data/${data.id}`).remove()
      .then(() => {
        // 从数据源数组中移除已删除的数据
        this.dataSource = this.dataSource.filter(item => item.id !== data.id);
      })
      .catch(error => {
        console.log('删除数据失败：', error);
      });
  }
}

<table>
  <tr *ngFor="let data of dataSource">
    <td>{{ data.name }}</td>
    <td>{{ data.age }}</td>
    <!-- 其他列 -->
    <td><button (click)="deleteData(data)">删除</button></td>
  </tr>
</table>