Ionic2 有条件地显示跨度答案

【问题标题】：Ionic2 conditionally show spanIonic2 有条件地显示跨度
【发布时间】：2017-03-02 22:17:54
【问题描述】：

我的 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 为真的列表元素显示复选标记，就像练习中的第一个元素一样。我怎样才能实现它？

【问题讨论】：

标签： angular ionic2

【解决方案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"},

    ...

    ]
}
];

【讨论】：