enter回车动态新增输入框及切换光标

angular项目

html

<div class="sf-table">
    <nz-table #editRowTable nzBordered [(nzData)]="listOfData" nzTableLayout="fixed" [nzShowPagination]="false" nzPageSize="31">
        <thead>
            <tr>
                <th>test1</th>
                <th>test2</th>
            </tr>
        </thead>
        <tbody>
            <tr class="testform" *ngFor="let data of editRowTable.data;let i=index">
                <td>
                    <input type="text" nz-input [(ngModel)]="editCache[i].test1" (keydown.enter)="keydownClick($event,i,1)"/>
                </td>
                <td>
                    <input type="text" nz-input [(ngModel)]="editCache[i].test2" (keydown.enter)="keydownClick($event,i,2)"/>
                </td>
            </tr>
        </tbody>
    </nz-table>
</div>

ts

 // 输入框回车事件
public keydownClick(event: any,i: number,type:number){
    if(type == 2){
        //如果其中一个输入框有值,新增一行为空的数据
        if(this.editCache[i].test1 || this.editCache[i].test2){
            this.listOfData = [
                ...this.listOfData,
                {
                    test1: "",
                    test2: ""
                }
            ];

            this.listOfData.forEach((item,i) => {
                this.editCache[i] = item
            })
        }
    }
    //第二个输入框回车后动态新增一行,为了获取到动态新增后的所有input dom元素,添加了定时器
    setTimeout(() => {
        let inputs:any = document.querySelectorAll('.testform input');
        // 切换光标
        if(type==1 && i == 0){
            inputs[1].focus();

        }else if(type==1 && i != 0) {
            inputs[2*i+type].focus();

        }else if(type==2 && i == 0){
            if(inputs[2]) inputs[2].focus();

        }else if(type==2 && i != 0) {
            if(inputs[2*i+type]) inputs[2*i+type].focus();
        }
    }, 10);

}