记录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) {   
    return index;  
}