07-31-2023, 09:34 AM
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!
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!