Property 'Price' does not exist on type 'Observable<wishlist[]> ngrx

Question

I am trying to display my initial wishlist state that has a name and price property. I get a " Property 'Price' does not exist on type 'Observable<wishlist[]>" error but Price does exist on the wishlist interface and in the reducer.

I am later going to add a product to the wishlist from my list of products but I want to get the inital state working first.

Maybe I am displaying it wrong in the html? using the for loop incorrectly. I am not sure.

Any help is appreciated.

heres wishlist interface

export interface wishlist{
    name: string; 
    Price: string; 

}

actions

import { Injectable } from '@angular/core'
import { Action } from '@ngrx/store'
import { wishlist } from 'model/wishlist.model'

export const ADD_WISHLIST   = '[WISHLIST] Add'
export const REMOVE_WISHLIST   = '[WISHLIST] Remove'


export class  AddWishlist implements Action{

    readonly type = ADD_WISHLIST


    //creating a class for each of the actions
    constructor(public payload: wishlist) {}
}

export class  RemoveWishlist implements Action{

    readonly type = REMOVE_WISHLIST


    //creating a class for each of the actions
    constructor(public payload: number) {}
}

export type Actions = AddWishlist | RemoveWishlist

reducer

import { Action, ActionsSubject } from '@ngrx/store'
import { wishlist } from 'model/wishlist.model'
//import { n } from 'node:inspector'
import * as WishlistActions from 'src/app/actions/wishlist.actions'

const initialState: wishlist ={
    name: 'insital wishlist',
    Price: '400'
}

export function wishlistreducer(state : wishlist[] = [initialState], action: WishlistActions.Actions){


    switch(action.type){
        case WishlistActions.ADD_WISHLIST: 
        return [...state, action.payload]; 

        default: 
        return state; 
    }
}

app state

import { wishlist } from 'model/wishlist.model';

export interface AppState{
    readonly WishList: wishlist[];
}`

wishlist html(this is called cart but im using it as a wishlist)

<div class="right">

    <h3>Wishlist</h3>
    <ul>
        <li *ngFor ="let wishlist of wishlists | async"></li>
        <a>{{ wishlists.Price }}</a>
    </ul>


</div>

wishlist component.ts (its called cart dont mind that)

import { Observable } from 'rxjs';
import { Store } from '@ngrx/store';
import { wishlist } from 'model/wishlist.model';
import { AppState } from 'src/app/app.state';


@Component({
  selector: 'app-cart',
  templateUrl: './cart.component.html',
  styleUrls: ['./cart.component.css']
})
export class CartComponent implements OnInit {


wishlists: Observable<wishlist[]>; 


  constructor( private store: Store<AppState>) {

    this.wishlists = store.select('WishList')


   }

  ngOnInit(): void {

 
  }
}

Answer 1

To elaborate on my comment, you have used the loop incorrectly. The *ngFor loop is unpackaging your array and assigning each value (iteration) to the variable "wishlist". As such you need to use this variable when accessing the property Price. Currently you are trying to access the property Price on the observable that is returned from your store.

 <ul>
      <li *ngFor ="let wishlist of wishlists | async">
            <a>{{ wishlist.Price }}</a>
      </li>      
 </ul>