ionic2折叠面板列表渲染问题

Question

我正在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>

​

​

我需要在这里修改什么，才能像第一张图片一样把它渲染成一个合适的手风琴列表(还有下面的水平线，每个列表元素都没有)？

Answer 1

我的按钮标记中缺少ion-item：

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