遍历Angular 2中的Json对象

Question

在Angular 2应用程序上渲染json时遇到问题。尝试了一些建议，我已经得到了下面的代码。问题是，我可以在我的控制台日志中看到它，但在我的模板上看不到它。也没有错误弹出。

接口：

{
    "count": 2,
    "next": null,
    "previous": null,
    "results": [
        {
            "perk": "apple equipment",
            "id": 1
        },
        {
            "perk": "catered food",
            "id": 2
        }
    ]
}

API服务：

 getPerkList() {
   return this.http.get(this.perkUrl).map(
    (res) => res.json()
   )
 }

component.ts：

export class CompanyProfileEditComponent implements OnInit {
  perkList: Object;
}

ngOnInit() {
  this.ApiService.getPerkList()
  .subscribe(data => {
  this.perkList = data;
     console.log(this.perkList);
 });
}

HTML：

 <ul *ngIf="perkList">
  <a *ngFor="let perkResult of perkList.children |  slice:0:7" (click)="onAddPerk(perkResult)">
         <li>{{ perkResult }}</li>
  </a> 
 </ul>

Answer 1

*ngFor="let perkResult of perkList.children应该为*ngFor="let perkResult of perkList.results，因为该对象没有属性children，并且您希望在li中显示一个属性，而不是整个对象

 <ul *ngIf="perkList">
  <a *ngFor="let perkResult of perkList.results |  slice:0:7" (click)="onAddPerk(perkResult)">
         <li>{{ perkResult.perk }}</li>
  </a> 
 </ul>