Clear() leaves the first item in a list

So I’m trying to create a button that clears a list, and it works fine the first time I use it after refreshing the app. But when I enter data and hit clear a second time (or any following time), it will always leave the first item in the list.

Related code:

TS file:

myItemsList = [
""
];

public clear() {

this.myItemsList = [""];  

}

HTML File:

<ion-item *ngFor="let myItem of myItemsList; let i = index">
  <ion-input [(ngModel)]="myItemsList[i+1]" type="input"></ion-input>
</ion-item>    
<div class="row">
  <div class="col">
    <button ion-button archive (click)="archiveList()">
      Archive List    
    </button>
  </div>
  <div class="col">  
    <button ion-button clear (click)="clear()">
      Clear List    
    </button> 
  </div>
</div>

cue Seinfeld

What’s the deal with

<ion-item *ngFor="let myItem of myItemsList; let i = index">
  <ion-input [(ngModel)]="myItemsList[i+1]" type="input"></ion-input>
</ion-item>

Why not just do:

 <ion-input [(ngModel)]="myItem" type="input"></ion-input>

Somebody had suggested using that and it worked for what I was trying to do; also using <ion-input [(ngModel)]=“myItem” type=“input”> doesn’t work. It doesn’t allow for an immediate next entry, whereas the previous one adds a new entry whenever the user starts typing

New:


Original:

When you initiate the array or clear it, you wont need the quotes within the brackets like this ‘= [“”]’. Remove those quotes and you might see a difference. Compiler might be seeing an empty string in your array as the first element, and not an empty array. Could you post your method for pushing items to the array?

I’d already tried taking away the brackets, but when I do that it takes away the input and there’s no where to type. As for pushing items to it, I had originally tried to use a button for that, but with the code automatically adding it I took it away. It was:

HTML:
<button small light (click)=“addItem()” >Add item

TS:
addItem() {
this.myItemsList.push("");
}