2017-03-02 5 views
-1

私はAngularjsアプリケーションをAngular2にアップグレードしています。私はアコーデオンリストで表示するために私のコントローラで繰り返していたJSON配列を持っていました。私は今、私のangular2コンポーネントに同じロジックを書きたいと思っています。Ionic2/Typecript forEachループ実装

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) { 
    } 

} 

答えて

0

私は私のコンポーネントを変更:

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>