Ionic2 / Typescript实现forEach循环

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>