ionic2 Akkordeon Liste Render Ausgabe

Question

Ich implementiere eine Akkordeon Liste in meiner Ionic2 Anwendung. Meine Komponente:

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; 

    } 
} 

Meine Vorlage:

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

und 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; 
    } 
} 

ich von Anker-Tag loswerden will (der Code wurde ursprünglich von angular1 die ich für die Navigation brauchte) und ersetze sie mit einem Knopf (um Navigation zu implementieren, als ein Alternative zum Anker). Wenn ich ersetzen meine Vorlage:

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

Was muss ich ändern es als eine richtige Akkordeon Liste zu machen, wie in dem ersten Bild (auch die horizontale Linie unten jedes Listenelement fehlt) ?

Answer 1

ion-item wurde in meinem Tag button fehlt:

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