CODEWITHSUNDEEP
angularionic5
tao wang
tao wang

Reputation: 93

ngFor cant use ion-input ? when type one word it will lose focus

my html is simple like this

<ion-list>
 <ion-item *ngFor="let item of editLists,index as i">
      <ion-input [(ngModel)]="editLists[i]"></ion-input>
    </ion-item>
</ion-list>

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

it'ok type words when ion-input outside ngFor; but when inside it will lose focus when i type one word how? many thanks

Upvotes: 2

Views: 334

Answers (1)

Chellappan வ
Chellappan வ

Reputation: 27333

Use trackBy along with ngFor to avoid re rendering input whenever input changes.

component.html

<ion-list>
 <ion-item *ngFor="let item of editLists,index as i;trackBy:trackEditList">
      <ion-input [(ngModel)]="editLists[i]"></ion-input>
    </ion-item>
</ion-list>
</ion-content>

component.ts

trackEditList(index,item){
    return index;
}

Working Example

Upvotes: 4

Related Questions