2017-06-28 2 views
1

イオン2では、JSONレスポンスを使用して次のコードで動的にタブを作成できます。私は、JSONレスポンスIonic 2 - リンクタブページを動的に使用する

はあなたが設定することでそれを行うことができます
Tabs : [{"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":[]},{"category_id":8,"parent_id":2,"name":"Rice Mix","is_active":1,"position":4,"level":2,"children":[]},{"category_id":4,"parent_id":2,"name":"Asafoetida","is_active":1,"position":5,"level":2,"children":[]},{"category_id":9,"parent_id":2,"name":"Pappad","is_active":1,"position":6,"level":2,"children":[]},{"category_id":11,"parent_id":2,"name":"Become A Stockist ","is_active":1,"position":7,"level":2,"children":[]}] 

答えて

1

export class TabsPage { 

public people: any; 
public result: String; 
public pep: any; 
public tabs : any; 

tab1Root = HomePage; 
constructor(public navCtrl: NavController, public peopleSearch: PeopleSearch) { 
this.loadPeople(); 
} 

loadPeople() { 

this.peopleSearch.load() 
    .then(data1 => { 
     this.people = data1.children[0].children 

     var result =JSON.stringify(this.people); 
       console.log("Tabs : ",result); 

    } 
    ); 
    } 
} 

<ion-tab *ngFor="let rew of people" [tabTitle]="rew.name"></ion-tab> 

tabs.ts

で動的に[ルート]を使用して、それらに対応するページを動的に作成したタブをリンクする必要がありますページにインデックスを付け、イオンタブで 'selectedIndex'を使用してタブを選択すると、

<ion-tabs selectedIndex={{index}}> 
    <ion-tab [root]="tab1Root" tabTitle="PageOne"></ion-tab> // 0 activates this page 
    <ion-tab [root]="tab2Root" tabTitle="PageTwo"></ion-tab> // 1 activates this page 
    <ion-tab [root]="tab3Root" tabTitle="PageThree"></ion-tab> // 2 activates this page 
</ion-tabs> 

希望があれば

関連する問題