title: ERROR Error: Reference.set failed: First argument contains an invalid key ($key) in property
body: <p>im a newbie to angular and I'm trying  to implement add-to-cart functionality on an angular project.
  here is the function that adds to cart:</p>
  
  <pre><code>  async addToCart(product: Productsobj) {
      let cartId = await this.getOrCreateCartId();
      let item$ = this.db.object(
        "/shopping-carts/" + cartId + "/items/" + product.$key
      );
      item$
        .valueChanges()
        .pipe(take(1))
        .subscribe((p: any) =&gt; {
          if (p) item$.update({ quantity: p.quantity + 1 });
          else item$.set({ product: product, quantity: 1 });
        });
    }
  </code></pre>
  
  <p>here is the error :</p>
  
  <blockquote>
    <p>core.js:6014 ERROR Error: Reference.set failed: First argument  contains an invalid key ($key) in property 'shopping-carts.-Lw2GnUrgt9nMyNKznlW.items.-KrqgOLs07ZkbapP4EGi.product'.  Keys must be non-empty strings and can't contain ".", "#", "$", "/", "[", or "]"</p>
  </blockquote>
  
  <p>i tried changing the function as :</p>
  
  <pre><code>  async addToCart(product: Productsobj) {
      let cartId = await this.getOrCreateCartId();
      let item$ = this.db.object(
        "/shopping-carts/" + cartId + "/items/{{product.$key}}"// changed product.$key
      );
      item$
        .valueChanges()
        .pipe(take(1))
        .subscribe((p: any) =&gt; {
          if (p) item$.update({ quantity: p.quantity + 1 });
          else item$.set({ product: product, quantity: 1 });
        });
     }
  </code></pre>
  
  <p>now getting the error as :</p>
  
  <blockquote>
    <p>core.js:6014 ERROR Error: Uncaught (in promise): Error: Reference.child failed: First argument was an invalid path = "/shopping-carts/-Lw2GnUrgt9nMyNKznlW/items/{{product.$key}}". Paths must be non-empty strings and can't contain ".", "#", "$", "[", or "]"</p>
  </blockquote>
  
  <p>how do i unwrap the <code>product.$key</code> properly?</p>
  
  <p><strong>edit:</strong>
  the product argument is an object : console.log(product)
  <a href="https://i.stack.imgur.com/ZeEk8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZeEk8.png" alt="product"></a></p>
  
  <p>after changing <code>product:product</code> to <code>productName:product.title</code> errors are gone , firebase shows:
  <a href="https://i.stack.imgur.com/BFE8w.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BFE8w.png" alt="firebase"></a></p>
  
  <p><strong>is there a way to get the whole object in firebase?</strong></p>