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

Question

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

@MFuatNUROĞLU hello, item-content webstorm it shows a custom attribute — tao wang, Aug 06 '20 at 03:29

score 4 · Answer 1 · answered Aug 05 '20 at 03:58

4

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

answered Aug 05 '20 at 03:58

Chellappan வ

23,645
3
29
60

thank u ; by the way [(ngModel)]="item" it will cause error item is a readonly value why? – tao wang Aug 05 '20 at 04:16
1

you can't bind local reference variable to ngModel. that's why [(ngModel)]="item" is throwing error. – Chellappan வ Aug 05 '20 at 04:29

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

1 Answers1

Linked