时间戳

首页 > 解决方案 > 我想在 home.html 页面中显示“$ key”为了确保代码有效，它显示了一行“snapshotChanges();” 在离子

android - 我想在 home.html 页面中显示“$ key”为了确保代码有效，它显示了一行“snapshotChanges();” 在离子

问题描述

此代码在 project.html 中不起作用

html 中的 $key 不起作用

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

从 project.ts 导入此文件

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();


  }}

我想在 Firebase 中选择数据 $key

标签： androidangularjsnode.jsfirebaseionic-framework

解决方案

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

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

来自 angularfire 文档

值变化（）

它是什么？- 返回一个 Observable 数据作为 JSON 对象的同步数组。所有快照元数据都被剥离，只有方法只提供数据。

和

快照更改（）

它是什么？- 返回一个 Observable 数据作为 AngularFireAction[] 的同步数组。

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

在您的 html 中的某处...

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

推荐阅读