ngxs 选择器显示数据（嵌套 json 数据）

Question

所以问题是我的对象 user 里面有许多其他对象..所以它变成了一个 nestet 数组（正如我将在上面展示的）我用 ngxs 制作了选择器来获取数据并在 html 代码中使用它们......但是它不可能获得辅助数组。

{
  "userProfile": {
    "id": 1,
    "firstname": "kevin",
    "lastname": "kevin",
    "email": "email@gmail.com",
    "phone": "6949647400",
    "cart": {
      "id": 6,
      "grandTotal": 1000,
      "cartItem": [
        {
          "id": 5,
          "quantity": 1,
          "totalPrice": 55.5,
          "product": {
            "id": 1,
            "name": "Vans Shoes",
            "price": 55.5
          }
        },
        {
          "id": 6,
          "quantity": 1,
          "totalPrice": 111,
          "product": {
            "id": 2,
            "name": "Nike Shoes",
            "price": 55.5
          }
        },
        {
          "id": 7,
          "quantity": 1,
          "totalPrice": 55.5,
          "product": {
            "id": 3,
            "name": "Volcom T-shirt",
            "price": 55.5
          }
        }
      ]
    },
    "username": "kevin",
    "password": "a$PITUkb3QoOCIbZSDO9xLzOdfKwM.H/sFp.pgYnfssi31LIn8WotW2",
    "roles": [
      {
        "id": 3,
        "name": "ROLE_ADMIN"
      }
    ]
  }
}

这是我从后端调用中获得的数组...我想显示带有产品等的购物车{}数组。

import { Component, OnInit } from '@angular/core';
import { Cart } from 'src/app/core/interfaces/cart';
import { CartState} from './state/cart.state';
import { Select, Store } from '@ngxs/store';
import { Observable } from 'rxjs';
import { UserProfile } from 'src/app/core/interfaces/userProfile';
import { ProfileState } from 'src/app/pages/profile/state/profile.state';
import { GetCart, } from './state/cart.action';

export class UserProfile {
  id!: number;
  username!: string ;
  password!: string ;
  email!:string;
  firstname!: string ;
  lastname!: string ;
  roles!: Roles;
  token!: string ;
  cart!:Cart[];
}


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


  @Select(ProfileState.userProfile) userProfile$!: Observable<UserProfile>;
  
  @Select(CartState.cart)cart$!: Observable<Cart>;

  constructor(private store:Store) {}

  ngOnInit(){
    this.userProfile$.subscribe(userProfileData => {
      this.userId = userProfileData.id
     });
      this.store.dispatch(new GetCart(this.userId)).subscribe(response => {
        this.cart = response;
     })
  }
}

Answer 1

首先，你的 UserProfile class 应该是一个接口而不是 class。

其次，userProfileData.cart不是数组。它是一个具有属性的对象： id: number、grandTotal: number 和 cartItem: SomeCartItem[]。

然后您需要正确订阅您的购物车 @Select(CartState.cart) 并仅在您收到 userId 时发送您的操作。并且不要忘记从您的 Observables unsubscribe()。

这是一个例子：

// your-component.ts
public ngOnInit(): void {
  this.userProfile$.subscribe(userProfileData => {
    this.userId = userProfileData.id

    this.store.dispatch(new GetCart(this.userId));
  });

  this.cart$.subscribe(cart => {
    this.cart = cart;
    // here you will be able to retrieve your cartItems from the cart object
  });
}

public ngOnDestroy(): void {
  this.userProfile$.unsubscribe();
  this.cart$.unsubscribe();
}

Answer 2

我也遇到了这个错误 html

<div class="container">
  <div class="row">
    <tbody *ngIf="cart;">
  <div *ngFor="let cartItem of cart">
    <div *ngFor="let product of cartItem.product">
  <ul>
    <li>{{product.name }}</li>
  </ul>
  </div>
  </div>
</tbody>
  </div>
</div>

有没有我可以阅读的任何想法或任何建议，因为我真的很喜欢这个。我想尝试 material-pagination 对我来说用 ngfor

显示 cartItem 数据听起来更容易

core.js:6456 错误错误：无法找到 'object' 类型的不同支持对象“[object Object]”。 NgFor 仅支持绑定到 Iterables，例如数组。

ngxs 选择器显示数据（嵌套 json 数据）

ngxs Selector display data (nested json data)

typescript

angular

ngxs