我想在主页.html页面中显示"$ key" 为了确保代码有效，它显示了离子中的一行"snapshotChanges ();"

Question

此代码在项目中不起作用.html

html 中的$key不起作用

<p>{{shopadd.$key}}</p>

从项目导入此文件

import { Component } from '@angular/core';
import { NavController ,NavParams } from 'ionic-angular';
import { AngularFireDatabase , AngularFireList } from '@angular/fire/database';
import {AngularFireAuth} from 'angularfire2/auth';
import { Observable } from 'rxjs/Observable';
export class HomePage {
shop : AngularFireList<any>;
shopadd : Observable<any[]>;
constructor(public navCtrl:NavController,public db:AngularFireDatabase,public navParams: NavParams,public auth: AngularFireAuth
){
this.shopadd = this.db.list('market').valueChanges();
this.shopadd = this.shop.snapshotChanges();

}}

我想在火库中选择$key数据

Answer 1

这两个语句不返回单个对象

this.shopadd = this.db.list('market').valueChanges();
this.shopadd = this.shop.snapshotChanges();

来自棱角火文档

值更改((

这是什么？ - 以 JSON 对象的同步数组的形式返回数据的可观察量。所有快照元数据都被剥离，只有该方法仅提供数据。

和

快照更改((

这是什么？ - 以 AngularFireAction[] 的同步数组的形式返回数据的可观察量。

this.marketItems = this.db.list('market').snapshotChanges().pipe(
map(results => 
results.map(r => ({ key: r.payload.key, ...r.payload.val() }))
)
);

Somwhere in your html...

<ul>
<li *ngFor="let item of marketItems | async">
{{item.key}} 
</li>
</ul>