javascript - 火力地堡 5 AngularFire2 5 : Find key in database

标签 javascript angular firebase firebase-realtime-database angularfire2

我正在尝试在 firebase 中控制 key ,但它一直按编号顺序给我 key 。这很好,但我已将 localStorage Id 存储在 firebase 中,并希望使用它来访问数据库中的特定节点。

我使用的服务具有将本地存储 ID 添加到 firebase 的功能。

购物车.service.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { Product } from './product';
import { map, take} from 'rxjs/operators';


@Injectable({
  providedIn: 'root'
})
export class ShoppingCartService {

constructor(private database: AngularFireDatabase) { }

// creates new id for users
private create() {
return this.database.list('/shopping-cart').push({
  dateCreated: new Date().getTime(),
});

}

// get shopping cart from firebase
private getCart(cartId: string) {
  return this.database.object('/shopping-cart/' + cartId);
}

// get or create cart Id
private async getOrCreateToCart() {
  let cartId = localStorage.getItem('cartId');
  if (!cartId) {
     let result = await this.create();
     localStorage.setItem('cartId', result.key);
     console.log('this is result.key: ', result.key);
     return result.key;
  }
  console.log('this is cartId, result: ', cartId);
  return cartId;
}

   // actually add to cart
   async addToCart(product) {
     console.log('this is add to cart product: ', product);
    const cartId = await this.getOrCreateToCart();
    let usr;
    const test = this.database.list('/shopping-cart').valueChanges().subscribe(usrs => {
      usr = usrs;
    });
    console.log('This is test: ', test);
    // const item = this.database.object('/shopping-cart/' + cartId);
    // item.take(1).subscribe(items => {
    //   if (items.$exists()) {
    //     items.update({quantity: items.quantity + 1});
    //   } else {
    //     item.set({product: product, quantity: 1});
    //   }
    // });
   }


}

购物车-cart.service.ts (文档的相关部分)

 // actually add to cart
   async addToCart(product) {
     console.log('this is add to cart product: ', product);
    const cartId = await this.getOrCreateToCart();
    let usr;
    const test = this.database.list('/shopping-cart/' + cartId).valueChanges().subscribe(usrs => {
      usr = usrs;
    });
    console.log('This is test: ', test);
    // const item = this.database.object('/shopping-cart/' + cartId);
    // item.take(1).subscribe(items => {
    //   if (items.$exists()) {
    //     items.update({quantity: items.quantity + 1});
    //   } else {
    //     item.set({product: product, quantity: 1});
    //   }
    // });
   }

这是我的html

 <div class="row">
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" *ngFor='let user of usrs'>
         <div *ngIf="findType(user)">
           <h1>This is an object {{user.key}}</h1>

         </div>
         <div *ngIf="!findType(user)">
          <h1>This is not an object</h1>
        </div>
      </div>
    </div>

这是 cart.component.ts

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
import { ProductListService } from '../productList.service';
import { AngularFireDatabase } from 'angularfire2/database';
import { ShoppingCartService } from '../shopping-cart.service';
import { Product } from '../product';

@Component({
  selector: 'app-cart',
  templateUrl: './cart.component.html',
  styleUrls: ['./cart.component.css']
})
export class CartComponent implements OnInit {
  title = 'Products';
  add = 'Add to cart';
  products: any[];
  usrs: any[];
  keys: any[];
  productsNumber;


  constructor(private db: AngularFireDatabase, public cart: ShoppingCartService) {
    const result = db.list('/products').valueChanges().subscribe(products => {
      this.products = products;
    });

    const users = db.list('/shopping-cart').valueChanges().subscribe(usr => {
      this.usrs = usr;
      console.log(this.usrs);
    })
   }

   addToCart(product) {
     console.log('This is product object: ', product);
     return this.cart.addToCart(product);
   }

   findType(element, obj){
     if(typeof element === 'object') {
       return true;
     }

     return false;
   }

  ngOnInit() {
  }

}

我的最终目标是找到我保存在数据库中的 cartId,向其添加一个数组,每次有人点击“添加到购物车”时,将该信息推送到该特定用户数组中。

现在,我只是尝试访问 cartId。我的数据库结构如下

数据库结构

不重要的文件夹

-something inside folder 1
-something inside folder 2
-something inside folder 3

购物车

- 01: 'test'
- -Lk234fkge (some random key I just made up but this is what the keys look like)
     - folder inside long key
- -Lk99388kkfl
     - folder inside long key

问题是,每次我使用 Object.keys(obj) 控制键时,我得到 0,1,2 而不是 0,(长键名),(其他长键名)。我试过使用 .list 来尝试这个,对我来说这似乎是我应该做的所有我尝试过的事情,但我无法让它工作。从查看服务文件可以看出,我也尝试过使用 .object,然后使用 take 和 subscribe 来访问数据,但我一直收到 take is not a function 的错误。所以,我决定从头开始,只是尝试访问特定的 key 。任何帮助将不胜感激,我花了两天时间阅读、制作教程,但其中大部分都已过时。我搜索了 firebase 文档,除了示例之外找不到任何东西,以我对 firebase 的有限了解,这些示例似乎与我想要完成的目标不符。如果您花时间阅读本文,谢谢。如果您对此很熟悉,请加入讨论。

最佳答案

.valueChanges() 返回一个数组;这就是 Object.keys 返回递增整数 0, 1, 2, ... 的原因。如果你想获得 id,你将需要使用类似 .snapshotChanges() 的东西;它仍然在一个数组中(但会有一个 .key 属性),所以如果你真的需要一个对象,你需要减少它。

有关使用值与快照更改的更多信息,请参阅 AngularFire 文档:https://github.com/angular/angularfire2/blob/master/docs/rtdb/lists.md#angularfireaction---action-based-api

关于javascript - 火力地堡 5 AngularFire2 5 : Find key in database,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50605469/

相关文章:

javascript - 导航折叠时 Bootstrap 左品牌列表奇怪的定位

javascript - 如何在Unity(5.6.0)中访问文本字段的值?

java - 使用 Firebase Firestore 中两个集合的数据填充 Androidx RecyclerView 和 CardView

javascript - 由于应用程序路径不正确,Electron 应用程序自动启动会显示一个额外的窗口

javascript - 为隐藏的输入字段生成随机值

arrays - 生成一个在 Angular 2 中不重复的数组

angular - ng2 - 基于模板动态创建组件

通过 ViewContainerRef 创建的 OnPush 组件更改后,Angular View 未更新

javascript - 如何在 Cloud Functions 中解析/返回 forEach 函数

java - 如何处理像 android.content.res.Resources$NotFoundException : String resource ID #0x0 这样的错误