ionic2手風琴列表呈現問題

我在我的Ionic2應用程序中實施了手風琴列表。我的組件：ionic2手風琴列表呈現問題

export class ContactPage { 

    public days : any[]; 
    public shownGroup; 

    constructor(public navCtrl: NavController) { 

     this.days= [ 

     { "id": 0, 
     "name": 'Ihr heutiger Trainingsplan', 
     "exercises":[ 

     {"id":1,"name":'Best Stretch', "watchedToday": 'false', "type":"body"}, 
     {"id":8,"name":'Farben', "watchedToday": 'false', "type":"memory"}, 

     {"id":2,"name":'Butterfly reverse', "watchedToday": 'false', "type":"body"}, 
     {"id":9,"name":'Punktgenaue Reaktion', "watchedToday": 'false', "type":"memory"}, 

     {"id":3,"name":'SquatRow', "watchedToday": 'false', "type":"body"}, 
     {"id":10,"name":'Loslassen', "watchedToday": 'false', "type":"memory"}, 

     // {"id":13,"name":'Wortpaare 1', "watchedToday": 'false', "type":"memory"}, 
     {"id":4,"name":'Plank', "watchedToday": 'false', "type":"body"}, 
     {"id":11,"name":'Wortpaare', "watchedToday": 'false', "type":"memory"}, //word-pair 1 : just show words 

     {"id":5,"name":'Push Up', "watchedToday": 'false', "type":"body"}, 
     {"id":12,"name":'Wortschatz', "watchedToday": 'false', "type":"memory"}, 

     // {"id":14,"name":'Wortschatz 1', "watchedToday": 'false', "type":"memory"}, // word-pair 2 : actual game 
     {"id":6,"name":'Side Plank', "watchedToday": 'false', "type":"body"}, 
     {"id":7,"name":'Squat', "watchedToday": 'false', "type":"memory"} 


     ] 
    } 

    ]; 

    this.days.forEach((value1, key) =>{ 


     value1.exercises.forEach((value2) =>{ 

     }) 
    }); 
} 

    toggleGroup(group: any){ 

     if(this.isGroupShown(group)){ 
      this.shownGroup=null 
     } 
     else 
     { 
      this.shownGroup=group 

     } 
    } 

    isGroupShown(group){ 

     return this.shownGroup==group; 

    } 
}

我的模板：

<ion-list> 

    <div *ngFor="let day of days"><br> 
     <div class="item item-icon-left" (click)="toggleGroup(day)" [ngClass]="{active: isGroupShown(day)}"> 
     <ion-icon *ngIf="!isGroupShown(day)" name="add"></ion-icon> 
     <ion-icon *ngIf="isGroupShown(day)" name="remove"></ion-icon> 
     {{day.name}} 

     </div> 

     <a class="item item-icon-left item-accordion" href="#"[hidden]="!isGroupShown(day)" *ngFor="let exercise of day.exercises"> 
      {{exercise.name}}  
     </a> 

    </div> 
</ion-list>

和CSS：

page-contact { 

    .list .item.item-accordion { 
     line-height: 50px; 
     padding-top: 0; 
     padding-bottom: 0; 
     transition: 0.09s all linear; 
    } 
    .list .item.item-accordion.ng-hide { 
     line-height: 0px; 
    } 
    .list .item.item-accordion.ng-hide-add, 
    .list .item.item-accordion.ng-hide-remove { 
     display: block !important; 
    } 
}

我想擺脫錨標記（代碼最初是由angular1我需要導航），並用按鈕替換它（以實現導航，作爲一個替代錨點）。當我代替我的模板：

<ion-list> 

    <div *ngFor="let day of days"><br> 
     <div class="item item-icon-left" (click)="toggleGroup(day)" [ngClass]="{active: isGroupShown(day)}"> 
     <ion-icon *ngIf="!isGroupShown(day)" name="add"></ion-icon> 
     <ion-icon *ngIf="isGroupShown(day)" name="remove"></ion-icon> 
     {{day.name}} 

     </div> 

     <button ion-button clear class="item item-icon-left item-accordion" [hidden]="!isGroupShown(day)" *ngFor="let exercise of day.exercises"> 
      {{exercise.name}}  
     </button> 

    </div> 
</ion-list>

我需要在這裏更改什麼以使其像在第一張圖上適當的手風琴列表（也水平線波紋管每個列表元素缺失）？

來源

2017-03-02 Nitish

ion-item失蹤在我的按鈕標籤：

<button ion-item class="item item-icon-left item-accordion" [hidden]="!isGroupShown(day)" *ngFor="let exercise of day.exercises"> 
      {{exercise.name}}  
     </button>

來源

2017-03-02 21:53:01 Nitish

ionic2手風琴列表呈現問題

回答

相關問題