Ionic - 从JSON响应创建动态选项卡

时间:2017-06-22 07:03:27

标签: json angular ionic-framework

我是Ionic和Angular的新手。基本上,我需要根据我自己的服务器的JSON响应动态创建选项卡。

我的JSON回复

{
"category_id": 1,
"parent_id": 0,
"name": "Root Catalog",
"position": 0,
"level": 0,
"children": [
    {
        "category_id": 2,
        "parent_id": 1,
        "name": "Default Category",
        "is_active": 1,
        "position": 1,
        "level": 1,
        "children": [
            {
                "category_id": 5,
                "parent_id": 2,
                "name": "Masala Mix",
                "is_active": 1,
                "position": 1,
                "level": 2,
                "children": []
            },
            {
                "category_id": 3,
                "parent_id": 2,
                 "name": "Pure spices",
                "is_active": 1,
                "position": 2,
                "level": 2,
                "children": []
            },
            {
                "category_id": 6,
                "parent_id": 2,
                "name": "Pickles",
                "is_active": 1,
                "position": 3,
                "level": 2,
                "children": []
            },
       ]}]}

我的输出应该是创建3个标签,名称为" Masala Mix"," Pure Spices"和#34;泡菜"。但我现在得到的只是一个名称为"默认类别"

的标签创建
<ion-tabs >
<ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
<ion-tab *ngFor="let rew of people" [root]="rew.root" [tabTitle]="rew.name">
 </ion-tab>
<ion-tab *ngFor="let cat of rew?.children" [tabTitle]="cat.name"></ion-tab>
</ion-tabs>

TypeScript文件

loadPeople() {

this.peopleSearch.load()
    .then(data1 => { 

      this.people = data1.children;
                console.log("Tabs : "+this.people);
    }
);
}

浏览器控制台输出:标签:[object Object]

HTTP提供商

  export class PeopleSearch {
  data1: any;

  constructor(public http: Http) {
  console.log('Hello PeopleSearch Provider');
  }

 load() {
if (this.data1) {
  return Promise.resolve(this.data1);
}

// Dont have the data yet
return new Promise(resolve => {
   this.http.get('http://happyos.in/cat.php')

    .map(res => res.json())
    .subscribe(data => {
      this.data1 = data;
      resolve(this.data1);
    });
});
}  
}

输出enter image description here

enter image description here

0 个答案:

没有答案