Ionic2/TypeScript实施for for for for for循环

Question

我正在将AngularJS应用升级到Angular2。我有一个JSON数组，我在控制器中迭代以在手风琴列表中显示。我现在想在Angular2组件中写下相同的逻辑。

我有以下代码：

myApp.factory('Plan', function() {
    var 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"}

        ]
      }
    ];
    return {
      all: function() {
        return days;
      },
      get: function(dayId) {
        // Simple index lookup
        return days[dayId];
      }
    }
  });
 //In my controller
 $scope.days=Plan.all();
                //Iterate over the list
                angular.forEach($scope.days, function(value1, key){
                    //iterate over the list of exercises
                    angular.forEach(value1.exercises, function(value2, key){
                      // Check if the fetched exercise id is same as current exercise from the frontend list and check if the fetched date is today 
                      if(value2.id==game_type && $scope.today === current_date_memory){
                        // If the fetched date is todat i.e. exercise was rated today: set the flag for watchedTodat to true 
                        value2.watchedToday=true;
                      }
                    });
                  });

如何将其转换为Angular2代码？

到目前为止，我的组件中有：

export class ContactPage {
     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"}

        ]
      }
    ];
    constructor(public navCtrl: NavController) {
    }
}

Answer 1

我将组件修改为：

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 name="isGroupShown(day) ? 'remove' : 'add'"></ion-icon>
        {{day.name}}
      </div>
       <a class="item item-icon-left item-accordion" [hidden]="!isGroupShown(day)" *ngFor="let exercise of day.exercises" 
           href="#">
          {{exercise.name}}
        </a>
  </div>
</ion-list>