Блог

Я думаю, что моя тема уже рассматривалась в Stack Overflow, но я ее не нашел. У меня есть ProductOrders, который содержит массив ProductOrder, и внутри каждого ProductOrder у меня есть Product. Я просто хочу представить название и цену текущего продукта в моем ngFor, но я не знаю, почему это не работает, в то время как автозаполнение находит эти две переменные…

Мой HTML-код

     <ul class="list-group"  *ngFor="let order of productOrders">
        <li class="list-group-item">{{order.quantity}}</li>
        <li class="list-group-item">{{order.user}}</li>
        <li class="list-group-item">{{order.product.id}}</li>
        <li class="list-group-item">{{order.product.name}}</li>
        <li class="list-group-item">{{order.product.pictureUrl}}</li>
    </ul>

  

Мой компонент проверки списка с помощью loadValidateOrders()

 

export class ListValidateOrderComponent implements OnInit {
   productOrders: ProductOrder[] = [];
   products: Product[] = [];
   sub: Subscription;
   private roles: string[];
   isLoggedIn = false;
   showAdminBoard = false;
   showModeratorBoard = false;
   errorMessage = '';
   username: string;

   private shoppingCartOrders: ProductOrders;

 constructor(private ecommerceService: EcommerceService,
       private userService: UserService, 
           private tokenStorageService: TokenStorageService) {

            }

 ngOnInit() {
   this.loadValidateOrders();

                   this.isLoggedIn = !!this.tokenStorageService.getToken();

   if (this.isLoggedIn) {
     const user = this.tokenStorageService.getUser();
     this.roles = user.roles;

     this.showAdminBoard = this.roles.includes('ROLE_ADMIN');
     this.showModeratorBoard = this.roles.includes('ROLE_MODERATOR');

     this.username = user.username;
       }

 }

 loadValidateOrders() {
   const user = this.tokenStorageService.getUser();
   this.ecommerceService.getAllActiveOrders()
    .subscribe(
               (products: any[]) => {
                   this.products = products;
                   this.products.forEach(product => {
                       this.productOrders.push(new ProductOrder(product, product.quantity, user.id));
                   })
               },
               (error) => console.log(error)
           );
    console.log(this.productOrders);

   }


}
  

Моя модель заказов на товары

 import { ProductOrder } from './product-order.model';
export class ProductOrders {
    productOrders: ProductOrder[] = [];
}

  

Моя модель заказа продукта

 import {Product} from "./product.model";

export class ProductOrder {
    product: Product;
    quantity: number;
    user: number;


    constructor(product: Product, quantity: number, user:number) {
        this.product = product;
        this.quantity = quantity;
        this.user = user;


    }
}

  

И моя модель продукта

 export class Product {
    id: number;
    name: string;
    price: number;
    pictureUrl: string;

    constructor(id: number, name: string, price: number, pictureUrl: string) {
        this.id = id;
        this.name = name;
        this.price = price;
        this.pictureUrl = pictureUrl;

    }
}

  

Мой контроллер на задней стороне Springboot

 
@RestController
@RequestMapping("/api/auth/orders")
@CrossOrigin()
public class OrderController {

    ProductService productService;
    OrderService orderService;
    OrderProductService orderProductService;
    UserService userService;
    OrderProductRepository orderProductRepository;
    ProductRepository productRepository;

    public OrderController(ProductService productService, 
            OrderService orderService, 
            OrderProductService orderProductService,
            OrderProductRepository orderProductRepository,
            ProductRepository productRepository

            ) {
        this.productService = productService;
        this.orderService = orderService;
        this.orderProductService = orderProductService;
        this.orderProductRepository = orderProductRepository;
        this.productRepository = productRepository;

    }
    @GetMapping("/getAllOrders")
    public Iterable<OrderProduct> listOrderActive() {
        return orderProductRepository.findByActiveFalse();
    }

  

И моя модель OrderProduct

 
@Entity
@Table(name="OrderProduct")
public class OrderProduct {

    @EmbeddedId
    @JsonIgnore
    private OrderProductPK pk;

    @Column(name="QUANTITY", nullable = false) private Integer quantity;
    
    @Column(name="USER", nullable = false) private Integer user;

    @Column(name="ORDERING_DATE", nullable = true) private Date dateOrdering;
    
    @Column(name="DELIVER_DATE", nullable = true) private Date dateDeliver;
        
    private boolean active;

  

вам нужно использовать тег into *ngFor, чтобы указать массив массива, а не «БОЛЬШОЙ» массив.

практический пример:

 <ul class="list-group"  *ngFor="let order of productOrders.productOrder">
    <li class="list-group-item">{{order.quantity}}</li>
    <li class="list-group-item">{{order.user}}</li>
    <li class="list-group-item">{{order.product.id}}</li>
    <li class="list-group-item">{{order.product.name}}</li>
    <li class="list-group-item">{{order.product.pictureUrl}}</li>
</ul>
  

(лучше всего использовать не order, а product для имени локальной переменной)

вам нужно использовать .ProductOrder, потому что вам нужен доступ к одному продукту не во всем массиве