Angular / Firebase - Return 来自 Firebase 的键和值

Question

我正在做一个 Angular 项目，按照一些教程设法从 firebase 数据库中获取一些数据。

这是获取值的代码

<ul>
<li class="text" *ngFor="let item of items | async">
  {{item.$value}}
</li>
</ul>

我的问题是...我正在获取值，但我也想获取名称（或键，如果是名称）。

例如数据如下所示：

items
 name: car,
 value: ford

此代码：

<ul>
  <li class="text" *ngFor="let item of items | async">
    {{item.$value}}
  </li>
</ul>

和JS代码：

export class AppComponent {
  items: FirebaseListObservable<any[]>;
  snippets: FirebaseListObservable<any[]>;
  constructor(db: AngularFireDatabase) {
    this.items = db.list('/items');
  }
}

只会 return 值。

如何同时获得两者

Answer 1

如果您使用的是 angularfire2 库，只需传递 preserveSnapshot 参数

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

@Component({
  selector: 'app-root',
  template: `
    <h1>{{key | async}}</h1>
    <h1>{{value | async}}</h1>
  `
})
export class AppComponent {
  key: any;
  value: any;
    constructor(db: AngularFireDatabase) {
  this.items = db.list('/items', { preserveSnapshot: true });
    this.items
      .subscribe(snapshots => {
        snapshots.forEach(snapshot => {
          this.key = snapshot.key;
          this.value = snapshot.val()
        });
      })}

}

更多信息请访问官方文档here

Angular / Firebase - Return 来自 Firebase 的键和值

Angular / Firebase - Return the Key and the Value from Firebase

javascript

firebase

angularfire

angular