Question

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

API：

{
    "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>

在Angular 2中迭代Json对象

1 个答案: