Ionic2有条件地显示跨度

时间:2017-03-02 22:17:55

标签: angular ionic2

我的ionic2应用程序中有一个手风琴列表。我的组件具有以下对象的JSON数组:

this.days= [

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

        {"id":1,"name":'Best Stretch', "watchedToday": 'true', "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"}


        ]
    }
    ];

在我的模板上,我按照以下方式迭代它:

  <ion-list>

    <div *ngFor="let day of days"><br>
      <div (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-item [hidden]="!isGroupShown(day)" *ngFor="let exercise of day.exercises">
      {{exercise.name}}

      <!-- LED -->

      <span style="float:right;"><ion-icon *ngIf="exercise.watchedToday" name="checkmark"></ion-icon></span>      
    </button>

  </div>
</ion-list> 

然而,这显示了所有元素的复选标记。

enter image description here

我想仅显示watchedToday为真的列表元素的复选标记,就像练习中的第一个元素一样。我怎样才能实现它?

1 个答案:

答案 0 :(得分:1)

在你的JSON中watchedToday是一个字符串,但它应该是一个布尔值(你应该删除引号)

this.days= [

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

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

    ...

    ]
}
];