不能将 *ngFor 用于 Angular 中的二维数组

Question

我看到很多类似的问题，但那里的解决方案对我不起作用。我想在 Angular.

中显示订单

我从 Spring 收到 Json 格式的客户订单。像这样：

[
    {
        "id": 1,
        "orderProducts": [],
        "numberOfProducts": 0
    },
    {
        "id": 2,
        "orderProducts": [
            {
                "quantity": 4,
                "product": {
                    "id": 1,
                    "brand": "apple",
                    "name": "iphone11",
                    "categoryId": 1
                }
            }
        ],
        "numberOfProducts": 1
    },
    {
        "id": 3,
        "orderProducts": [
            {
                "quantity": 9,
                "product": {
                    "id": 1,
                    "brand": "apple",
                    "name": "iphone11",
                    "categoryId": 1
                }
            },
            {
                "quantity": 6,
                "product": {
                    "id": 2,
                    "brand": "xiaomi",
                    "name": "Note10",
                    "categoryId": 1
                }
            },
            {
                "quantity": 1,
                "product": {
                    "id": 6,
                    "brand": "cccccccccccccccc",
                    "name": "cccccccccccccc",
                    "categoryId": 1
                }
            }
        ],
        "numberOfProducts": 3
    },
    {
        "id": 4,
        "orderProducts": [
            {
                "quantity": 5,
                "product": {
                    "id": 1,
                    "brand": "apple",
                    "name": "iphone11",
                    "categoryId": 1
                }
            }
        ],
        "numberOfProducts": 1
    }
]

所以我在 Angular 中创建了一个 class 来接受它。

db-orders.ts

export class DbOrders {
    id: number;
    orders: ProductOrder[];
    numberOfProducts: number;

    constructor(orders: ProductOrder[]){
        this.orders = orders;
    }
}

产品-order.ts

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

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

product.ts

export class Product {
    id: number;
    brand: string;
    name: string;
    category: ProductCategory;

    constructor(){}

}

这是一项服务class。

order.service.ts

export class OrderService {

  private orderUrl: string = 'http://localhost:8080/orders';

  constructor(private http: HttpClient) { }

  saveOrder(order: ProductOrders) {
    console.log("Hello")
    return this.http.post<ProductOrders>(this.orderUrl, order);
}

public findOrders(): Observable<DbOrders[]> {
  return this.http.get<DbOrders[]>(this.orderUrl);
}

}

顺序-list.component.ts

export class OrderListComponent implements OnInit {

  receivedOrders: DbOrders[] = [];
 
  constructor(private orderService: OrderService) { }

  ngOnInit(): void {
    this.orderService.findOrders().subscribe(
      data =>{
        this.receivedOrders = data;
      }
    );
  }
}

顺序-list.component.html

<div *ngFor="let receivedOrder of receivedOrders">
   <p>Number of Products in the order: {{receivedOrder.numberOfProducts}}</p> 
 
     <div *ngFor="let order of receivedOrder.orders">
        <h1>Product name: {{ order.product.name }}</h1>
    </div>
</div>

在这种情况下，只显示产品数量，没有其他：

我尝试添加一个 toArray 方法：

<div *ngFor="let order of toArray(receivedOrder.orders)">


ngOnInit(): void {
    this.orderService.findOrders().subscribe(
      data =>{
        this.receivedOrders = data;
      }
    );
  }

  toArray(orders: object) {
    return Object.keys(orders).map(key => orders[key])
  }

无效。

我也尝试添加索引。

<div *ngFor="let receivedOrder of receivedOrders; let i=index"">
       <p>Number of Products in the order: {{receivedOrder.numberOfProducts}}</p> 
     
         <div *ngFor="let order of receivedOrder.orders; let j=index"">
            <h1>Product name: {{ order.product.name }}</h1>
        </div>
    </div>

也不行。

我的错误是什么？谢谢！

Answer 1

您似乎遇到了一些问题。首先，您的数据结构与您的 classes 不匹配。

例如您的 ProductOrder 对象应该有一个 OrderProduct 对象数组，因为这就是您的数据所具有的。

您的 ProductOrder 的构造函数永远不会被调用，因为您没有从 class.

实例化对象

简单来说，将您的 html 更改为这样即可：

<div *ngFor="let receivedOrder of data; let i=index">
    <p>Number of Products in the order: {{receivedOrder.numberOfProducts}}</p>

    <div *ngFor=" let order of receivedOrder.orderProducts; let j=index">
        <h1>Product name: {{ order.product.name }}</h1>
    </div>
</div>

您还可以在 StackBlitz 上找到 demo。

不能将 *ngFor 用于 Angular 中的二维数组

Cannot use *ngFor for a two-dimensional array in Angular

json

angular

ngfor