如何列出html中对象中的对象？

Question

我正在 Angular 和 Node.js 中编写应用程序。我有一个对象（订单），它有一个对象（项目）列表，也包含对象（产品 ID 列表）。我想将它们全部显示在 html 文件中。请帮助我。

html 文件:

<div *ngIf="order">
    <div *ngFor="let item of order.items"> // <- it does not work
        <a>{{order.items}}</a> // <--
    </div>
</div>

ts 文件：

export class AdminOrderItemComponent implements OnInit {
  order: Order;
  orderId;
  constructor(private orderService: OrderService, private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.paramMap
      .subscribe(params => {
        this.orderId = [params.get('id')];
        this.getOrderById();
      });
  }
  getOrderById() {
    this.orderService.getOrderById(this.orderId).subscribe(
      res => {
        this.order = res;
      },
      err => console.log(err)
    );
  }
}

下单界面：

export interface Order  {
  _id: any;
  shipping: string;
  userData: {};
  sum: number;
  items: {};
}

Answer 1

ngFor 迭代集合的项目。如果你看一下你的模型，你会发现 items 是一个对象 ({})，而不是一个数组 ([])。

您最好的选择是转换从 node.js 后端收到的对象以满足您的需求，或者（我认为最好）让您的 node.js 模型也将项目视为一个集合，这似乎更合适.

Answer 2

来自@kg99的回答：

键：{{item.key}} 和值：{{item.value}}

如何列出html中对象中的对象？

How to list objects in an object in html?

html

node.js

angular

ngfor