Value dropping to the second Input when placing a value on the first input

Ionic Framework ionic-v3
1

I am creating a card creator, where the user places the number of cards and then the value of each card. The problem is that, when the user is placing the value of the card, the value drops to another input.

Code:

HTML:

    <ion-item>
      <ion-label position="floating">Numero de cartões:</ion-label>
      <ion-input type="number" (ionChange)="updateNumberOfPointCards($event)"></ion-input>
    </ion-item>

    <ion-item padding-horizontal *ngFor="let card of pointCards;let i= index">
      <ion-label position="floating">Pontos do cartão {{i+1}}:</ion-label>
      <ion-input type="number" (ionChange)="updateCardPointsValue($event,i,card)"></ion-input>
    </ion-item>

javascript:

pointCards = [];

updateNumberOfPointCards(number){
    this.pointCards.length = number.detail.value;
    console.log(this.pointCards);

  }

  updateCardPointsValue(value, cardNumber, cardtest){
    console.log("VALOR ",value.detail.value);
    console.log("NUMBERO DO CARTÂo", cardNumber);
    console.log("CARD TEST", cardtest);
  
   this.pointCards[cardNumber] = value.detail.value;
   console.log(this.pointCards);
  }

this is what happens when i place a value on the first input:

After placing a value on the first input

After i press enter, the value drops to the second input idk why.

and the console.log of the array is this : (2) ["2", empty]

and then i place as value on the first input, like a 3 and the array gets like this: (2) ["3", empty]

2

Don’t assign to length in JavaScript arrays unless you are completely familiar with the semantics of doing so (and I would argue against doing it even then). It creates black holes in the array that are invisible to ngFor.

I think this whole setup would be much more readable and robust if you used FormControls instead of (ionChange) handlers.