如何在angular5 html文件中显示以下对象？

Question

在上面的屏幕截图控制台中，我有一个对象，带有2个值users和tickers 。 同样，每个都是值的数组。

现在，如何在上述屏幕快照中指定的angular5 html模板中显示这些值？

我正在尝试使用ngFor，但显示错误。

Answer 1

假设这是您的数据：

    public data = {
      tickers:[
         {id:"1",name:"Ticker Name 1", company:"Company 1"},
         {id:"2",name:"Ticker Name 2", company:"comapny 2"}
      ],
    users:[
         {id:"1",first_name:"User1 ", last_name:"u1last", email:"user1@test.com"},
         {id:"2",first_name:"User2", last_name:"u2last", email:"user2@test.com"},
         {id:"3",first_name:"User3", last_name:"u3last", email:"user3@test.com"},
         {id:"4",first_name:"User4", last_name:"u4last", email:"user4@test.com"}
      ]
  };

  public dataKeys; // This will hold the main Object Keys.

构造函数将如下所示：

 constructor() {
     this.dataKeys = Object.keys(this.data);
}

这是您需要编写的简单HTML：

<div *ngFor="let key of dataKeys">
  <h3>{{ key }}</h3>
  <ul>
    <li *ngFor="let d of data[key]">{{d.name || d.first_name}}</li>
    </ul>
  </div>

这是适合您的情况的完整工作插件：

单击此处查看工作解决方案

Answer 2

1. 您可以使用json管道进行调试，如下所示：

    {{object |json}} 

2. 如果您完全希望如图所示，请查看此解决方案 。 在这种情况下，您无需使用* ngFor在模板中手动编写对象的一级属性名称

Answer 3

你可以这样使用

<ul>
  <P>users</p>
  <li *ngFor="let item of object.users; let i = index">
    {{i}}. {{item.frist_name}}
  </li>
<P>Tickets</p>
  <li *ngFor="let item of object.tickers; let i = index">
    {{i}}. {{item.name}}
  </li>
</ul>

Answer 4

根据文档 ，应该是这样的：

Users:
<ol>
    <li *ngFor="let user of users">{{user.first_name}}</li>
</ol>
Tickets:
<ol>
    <li *ngFor="let ticket of tickets">{{ticket.name}}</li>
</ol>