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>

ionic2手风琴列表渲染问题

1 个答案: