我的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>
然而,这显示了所有元素的复选标记。
我想仅显示watchedToday
为真的列表元素的复选标记,就像练习中的第一个元素一样。我怎样才能实现它?
答案 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"},
...
]
}
];