Create an account

Very important

  • To access the important data of the forums, you must be active in each forum and especially in the leaks and database leaks section, send data and after sending the data and activity, data and important content will be opened and visible for you.
  • You will only see chat messages from people who are at or below your level.
  • More than 500,000 database leaks and millions of account leaks are waiting for you, so access and view with more activity.
  • Many important data are inactive and inaccessible for you, so open them with activity. (This will be done automatically)


Thread Rating:
  • 392 Vote(s) - 3.53 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Unable to use interface with AngularFirebase

#1
While trying to create a shopping cart in angular, I've run into type issues regarding my components and services. My service currently returns `AngularFireList<{}>` and though I can change its type, doing so has side-effects in other methods and inside of my component. I'm wondering if there is an efficient way to allow my current interface to become the type.

I've tried to cast the type as `Observable<ProdInterface>` which again, solves one issue while bringing in another.

My current interface is:

```typescript
export interface ProdInterface {
$key:string;
color_way: string;
name: string;
id: number;
description: string;
photo:string;
price:number;
qty:number;
}
```

I'm looking to implement this method so that I can keep the `$key` which will allow me to find an item in my firebase database:

```typescript
async addToCart(product: ProdInterface){
let cartId = await this.getOrCreateCart();
let item$ = this.getItem(cartId, product.$key);
item$.snapshotChanges().pipe(take(1)).subscribe(item => {
item$.update({ product: product,
quantity: (item.payload.exportVal().quantity || 0) + 1 });
});
}
```

Getting all of my products from my firebase database returns an `Observable<{}>` type which does not have `$key` attribute I need for my `addToCart` method

```typescript
getAll(){
return this.db.list('/products').valueChanges();
}
}
```
Which then means when using the method the wrong type is returned:
```typescript
this.products$ = this.productService.getAll();
```


My end goal is such that I can map the current returned type of `getAll()` to my `ProdInterface` so that I can then use it inside of my `addToCart` method.

I would appreciate any guidance in the right direction.

Thanks!
Reply

#2
With the example from the Firebase [docs][1] you could try this:

```
this.product$ = db.ref("products").orderByKey()
.once("value")
.pipe(
.map(snapshot => {
snapshot.forEach(childSnapshot) {
var key = childSnapshot.key
var childData = childSnapshot.val()
return {key, ...childData}
}
}));
```


[1]:

[To see links please register here]

Reply



Forum Jump:


Users browsing this thread:
1 Guest(s)

©0Day  2016 - 2023 | All Rights Reserved.  Made with    for the community. Connected through