如何独立更新数组？ 离子v5

Question

I am very new to ionic and ts so be kind:)

I have an array of objects that gets updated when you add an 'exercise' and you can specify how many sets and reps you want. The problem is that when I change the value of the input for the sets and reps it updates every instance of the array. I know it because each instance of the array has the same [(ngmodel)] tag but I am not sure how to work around this and any help is much appreciated.

here 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 TS

    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']);
      }
    }

Also, Im not sure how to declare an empty array of objects with specified types. The array I have has the initialized object in it but Im not sure how to initialize it without the object.

Answer 1

<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>
  <div *ngFor="let exercise of exerciseDetails;let i of index;">
    <ion-button expand="block" (click)="add(exercise,i)">Add Exercise</ion-button>
    <ion-list>
      <ion-card>
        <ion-card-content>
          <ion-item lines="none">
            <ion-label><h2>{{exercise?.name}}</h2></ion-label>
            <!-- <ion-button (click)="removeExercise(i)" 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)]="exercise.sets"></ion-input>
          </ion-item>
          <ion-item>
            <ion-label class = "numberOf"><h3>How many reps?</h3></ion-label>
            <ion-input type="number" [(ngModel)]="exercise.reps"></ion-input>      
          </ion-item>
        </ion-card-content>
      </ion-card>
    </ion-list>
  </div>
  
</ion-content>

<ion-footer class ="ion-padding">
  <ion-button expand="block" (click)="create(workoutNameValue)">Create Workout</ion-button>
</ion-footer>

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { ModalController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  exercises: any[] = [];
  exerciseDetails: any = []
  workoutNameValue;

  constructor() { }

  ngOnInit() {
   
  }

  add(item,index) {
    console.log(item,'item')
    this.exerciseDetails[index].sets = item.sets;
    this.exerciseDetails[index].reps = item.reps;
// or 
 this.exerciseDetails.filter( (val, i) => {
      if( i == index) {
        val.sets =  item.sets;
        val.sets = item.reps;
      }
    });
  }

  
  

  create() {
    this.exercises.push({ name: this.workoutNameValue, sets: '', reps:''})
    console.log(this.exercises);
    this.exerciseDetails = this.exercises;
  }
}