在 Angular 4 表中加载 Firebase 数据

Question

我正在为我使用 firebse 的数据库开发 angular 4 项目。我在其中使用 angular 的智能表来删除表数据的功能，它需要每条记录的 firebase 键，所以我从 firebase 获取它，但我无法在我的表中加载该数据以下是我的代码

我在服务中有如下写函数

getEData(): Observable<any[]>  
 {
    return this.af.list('/enquirydata').snapshotChanges();
 }

table页面的component.ts如下

 source: LocalDataSource = new LocalDataSource();


  items: Array<any> = [];


  constructor(private service: SmartTableService, private router: Router) {
 this.service.getEData().subscribe(k=> {  
  k.map(c=> {
  console.log(c.payload.val());

  this.items.push(c);
  })
  console.log(this.items);
  });


    this.source.load(this.items);
    console.log(this.source);

    } 

这里c.payload.val() 包含实际数据，而c 包含带有元数据的数据，例如密钥和其他数据。

现在我无法将这些数据加载到我的表中，我该怎么做？

Answer 1

试试这个方法

getEData(): Observable<any[]>  
 {
    return this.af.list('/enquirydata').snapshotChanges().map(changes => {
      return changes.map(c => ({ key: c.payload.key, ...c.payload.val() }));
    });
 }

Answer 2

Observable 和 Subscribe 异步操作。

调用 this.source.load(this.items) 时，this.items 中可能没有任何内容。

尝试更改为同步模式（不可观察）

或者检测this.items.push(c)何时被调用，调用this.source.load(this.items)

或将 this.source.load(this.items) 放在 this.items.push(c) 之后。如下图。

constructor(private service: SmartTableService, private router: Router) {}

ngOnInit() {
  this.service.getEData().subscribe(k => {  
    k.map(c => {
      this.items.push(c);
      this.source.load(this.items);
    })
  });
}