Clear() leaves the first item in a list


#1

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>

#2

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>

#3

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:


#4

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?


#5

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("");
}