As a newcomer to Ionic and TypeScript, I would appreciate your kindness in helping me with a problem I am facing. I have an array of objects that get updated when adding an 'exercise', where you can specify the number of sets and reps. The issue is that changing the value of the input for sets and reps updates every instance of the array. I understand this is because each instance of the array shares the same [(ngModel)] tag, but I am unsure how to resolve this. Any assistance would be greatly appreciated.
Below is my HTML:
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Create</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class ="ion-padding" >
<ion-item>
<ion-input class ="name" [(ngModel)]="workoutNameValue" placeholder="Name of workout?"></ion-input>
</ion-item>
<ion-button expand="block" (click)="add()">Add Exercise</ion-button>
<ion-list *ngFor="let exercise of exercises">
<ion-card>
<ion-card-content>
<ion-item lines="none">
<ion-label><h2>{{exercise}}</h2></ion-label>
<ion-button (click)="removeExercise()" slot = "end"><ion-icon name="close-outline"></ion-icon></ion-button>
</ion-item>
<ion-item>
<ion-label class = "numberOf"><h3>How many sets?</h3></ion-label>
<ion-input type="number" [(ngModel)]="sets"></ion-input>
</ion-item>
<ion-item>
<ion-label class = "numberOf"><h3>How many reps?</h3></ion-label>
<ion-input type="number" [(ngModel)]="reps"></ion-input>
</ion-item>
</ion-card-content>
</ion-card>
</ion-list>
</ion-content>
<ion-footer class ="ion-padding">
<ion-button expand="block" (click)="create(workoutNameValue)">Create Workout</ion-button>
</ion-footer>
And here is my TypeScript code:
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ModalController, NavController, NavParams } from '@ionic/angular';
import { ExerciseModalComponent } from '../exercise-modal/exercise-modal.component';
import { WorkoutsPage } from '../workouts/workouts.page';
@Component({
selector: 'app-create',
templateUrl: './create.page.html',
styleUrls: ['./create.page.scss'],
})
export class CreatePage implements OnInit {
exerciseList: any = "";
workoutName: string;
exercises: any[] = [];
workout: any[] = [];
exerciseDetails: [{name: string, sets: number, reps: number}] = [{name: null, sets: null, reps: null}];
sets;
reps;
workoutNameValue;
constructor(private router: Router ,private http: HttpClient, private modalCtrl:ModalController) { }
ngOnInit() {
this.http.get('https://wger.de/api/v2/exercise/').subscribe((response) => {console.log(response);this.exerciseList = response['results']});
}
async add(){
const modal = await this.modalCtrl.create({
component : ExerciseModalComponent
});
modal.onDidDismiss()
.then((data) => {
this.exerciseList = data.data;
this.exercises.push(this.exerciseList);
console.log(this.exercises);
});
await modal.present();
}
removeExercise(){
this.exercises.splice(this.exerciseList, 1);
}
create(){
this.exerciseDetails.push({name:this.exerciseList,sets:this.sets,reps:this.reps})
console.log(this.exerciseDetails);
this.router.navigate(['./workouts']);
}
}
I also need help declaring an empty array of objects with specific types. Currently, the initialized object is in the array, but I'm unsure how to initialize it without the object.