时间戳

首页 > 解决方案 > 无法将查询参数写入数据库

javascript - 无法将查询参数写入数据库

问题描述

这不是写入数据库。

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    const itemsRef = this.db.list('cart_checkouts');
    itemsRef.push({checkoutProductName : this.product_name });
  });
}

我得到错误：

错误：Reference.push 失败：第一个参数在属性“cart_checkouts.checkoutProductName”中包含未定义

查询参数为：

id, thumbnail, quantity, product_name, product_price

所以 product_name 应该可以写入数据库。

当我写

itemsRef.push({checkoutProductName : "Helmet" });

它将“头盔”保存到数据库中，所以我知道错误在 this.product_name 中。

我有一个发送查询参数的表单，如下所示：

<form [formGroup]="submitForm" (ngSubmit)="checkOut(items)">
<input type="submit" value="Check Out">
</form>

public checkOut(items: any)  {
{ this.router.navigate(['check-out'], { queryParams: { checkouts: JSON.stringify(this.items) } });

当我写这个时：

itemsRef.push({checkoutProductName :  params['checkouts'] });

它获取整个结帐项目数组并将其保存到 checkoutProductName。

url 字段中的查询参数如下所示：

http://localhost:4200/check-out?checkouts=%5B%7B%22id%22:1,%22thumbnail%22:%22product-2.gif%22,%22quantity%22:2,%22product_name%22:%22Adult%20Female%20Bike%22,%22product_price%22:20.5%7D,%7B%22id%22:3

但不是 %22，而是引号。

我这样调试：

console.log("params " + params);
console.log("this.checkouts " + this.checkouts);
console.log("this.items HERE " + this.items);
console.log("params.checkouts " + params.checkouts);
const item = JSON.parse(params.checkouts);
console.log("item.product_name " + item.product_name);
console.log("params checkouts product_name " + params.checkouts["product_name"]);

控制台日志返回：

params [object Object]
this.checkouts undefined
this.items HERE undefined
params.checkouts [{"id":1,"thumbnail":"product-2.gif","quantity":2,"product_name":"Adult Female Bike","product_price":20.5},{"id":3,"thumbnail":"product-4.gif","quantity":3,"product_name":"Adult Unisex Helmet","product_price":4}]
item.product_name undefined
params checkouts product_name undefined

标签： javascriptangularfirebasefirebase-realtime-database

解决方案

您不能循环访问类似 this.router.navigate 的命令。此命令将您从一个页面带到另一个页面，因此它实际上所做的是导航到结帐页面一次 - 使用循环中的最后一个页面 - 使用最后一项。

由于它是您结账时使用的商品列表，因此无法在 URL 中传输。该列表需要保存在内存中的某个位置，购物车页面将商品填满，结帐页面从中读取并将每个商品推送到数据库。

为此，您需要进行以下更改：

crud-service.ts

export class CrudService {
  checkoutItems: any[] = [];

  constructor(

添加行checkoutItems: any[] = []; 这是为两个页面保存列表的位置。

购物车.component.ts

public async checkOut(items: any)  {
    console.log("ITEMS", items);
    this.crudService.checkoutItems = items;
    await this.router.navigate(['check-out']);
  }

这是所有checkOut方法都应该做的（复制并粘贴到现有代码上）。请注意它如何将项目保存在其他页面也可以读取的内存中。

签出.component.ts

ngOnInit() {
  ...
  const itemsRef = this.db.list('cart_checkouts');

  this.crudService.checkoutItems
    .forEach(item => itemsRef.push(
      {
        checkoutProductName: item.product_name,
        checkoutThumbnail: item.thumbnail,
        checkoutQuantity: item.quantity,
        checkoutProductPrice: item.product_price
      }));
  }

复制所有ngOnInit代码并粘贴到您的代码上。这里重要的是从内存中的列表读取并将每个项目添加到数据库的最后一部分。我删除了解析 URL 的部分，因为该列表未与 URL 一起传递。其余部分ngOnInit保持不变 - 我展示所有这些内容是为了让您更轻松地复制和粘贴。

推荐阅读