记录angular8中使用 input框输入每一个字符都会失去焦

前端框架 angular8.0

ui组件 NG-ZORRO

场景：表单输入: 前端动态添加input框

数据：eg：['123','222','xxx'] 数组每项为string类型 ， ["192.168.1.127/24", "123.2.1.11", "123.2.1.11-192.168.1.127

---

<div  *ngFor="let item of ipPoolData['_ipAddress'] index as i;trackBy:trackByFn"  style="height: 50px;position: relative;">

    <input name="{{'_ipAddress'+ i}}" nz-input type="text" placeholder="请输入IP/子网IP/子网范围" required

        [(ngModel)]="ipPoolData['_ipAddress'][i]" (ngModelChange)="checkIpRangeVal($event)">

    <span *ngIf="error['iprange']" class="text-error">IP输入不合法</span>

    <div class="btn-handle-item">

        <button nz-button nzType="danger" [nzSize]="'small'"

                (click)="deleteIPCollectionField(i)" *ngIf="ipPoolData['_ipAddress'].length>1">

                <i nz-icon nzType="minus" nzTheme="outline"></i>

        </button>

        <button *ngIf="item && ipPoolData['_ipAddress'].length < 5"

                nz-button nzType="primary" [nzSize]="'small'" [disabled]="ipPoolData['_ipAddress'].length-1 > i " (click)="addIPCollectionField()">

                <i nz-icon nzType="plus" nzTheme="outline"></i>

        </button>

    </div>

</div>

            

---

坑1：

问题： 当数组每项为string类型时，循环后input内ngmodel直接用item绑定，会出现ngmodle无法赋值问题

解决：数组ngfor循环后每项内容ngmodel绑定需用ipPoolData['_ipAdress'][i]，若直接用item则无法绑定数据，ngmodel一般需要item.value类型；

坑2：

问题：input每输入一个字符，鼠标就会失焦问题；

原因： ngmodel用ipPoolData['_ipAdress'][i]绑定后，input每次输入后，angular会重新查询服务器可能会重置包含所有新条目对象的列表，即使先前已显示这些条目也是如此；在这种情况下，Angular只能看到由新的对象引用组成的新列表，它别无选择，只能用所有新的 DOM 元素替换旧的 DOM 元素。 因此会出现input每输入一个字符，鼠标就会失焦问题；

解决方案：

<div *ngFor="let item of ipPoolData['_ipAddress'] index as i;trackBy:trackByFn"></div>

ngFor循环后使用trackBy：trackByFn；向该组件添加一个方法，该方法返回 NgFor 应该跟踪的值。这个例子中，该值是ipPoolData['_ipAdress']的i项，如果 ipPoolData['_ipAdress']的index项已经被渲染，Angular 就会跟踪它，而不会重新向服务器查询相同的ipPoolData['_ipAdress']的index项。

trackByFn(index: any, item: any) {

         returnindex;  

}