属性 'Price' 在类型 'Observable<wishlist[]> ngrx 上不存在

Question

我正在尝试显示具有名称和价格的初始愿望清单状态属性。我收到“属性 'Price' does not exist on type 'Observable”错误，但 Price 确实存在于 wishlist 界面和 reducer 中。

我稍后会从我的产品列表中将一个产品添加到心愿单，但我想先让初始状态正常工作。

也许我在 html 中显示错误？错误地使用 for 循环。我不确定。

感谢任何帮助。

这里是心愿单界面

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

}

动作

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

减速机

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; 
    }
}

应用状态

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

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

愿望清单html（这叫做购物车，但我将其用作愿望清单）

<div class="right">

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


</div>

愿望清单component.ts（它叫做购物车，不介意）

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

为了详细说明我的评论，您错误地使用了循环。 *ngFor 循环正在解包您的数组并将每个值（迭代）分配给变量“wishlist”。因此，您需要在访问属性价格时使用此变量。目前您正在尝试访问从您的商店返回的可观察对象上的属性 Price。

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

属性 'Price' 在类型 'Observable<wishlist[]> ngrx 上不存在

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

ngrx

angular