Angular 4使用viewChildran在动态生成的文本框中设置焦点 [英] Angular 4 set the focus in the dynamic generated textbox using viewChildran

问题描述

我有如下动态生成的文本框.

I have the dynamically generated textbox as below.

<tr *ngFor="let item of data; let in=index">
    <td>
                        <input #unitNumber type="text" name="workPerformed-workcode-{{in}}" [(ngModel)] = "item.unitnumber" >
                      </td>
<td> <!-- Search option is given to chose the unit number----></td>
</tr>

在这里，将提供搜索选项以选择单位编号，如果已选择，则将使用viewChildran专注于相应的文本框.

Here, the search option is given to choose the unit number, if it has been chosen, then the corresponding textbox will be focused on using viewChildran.

我的尝试是

@ViewChildren('unitNumber') enteredUnitNumbers;

// for searching, I have used the material dialog box
const dialogRef = this.dialog.open(SearchEquipmentComponent, dialogConfig);

    dialogRef.afterClosed().subscribe(
      <!-- HERE I NEED TO DO THE FOCUS ON PARTICULAR TEXTBOX ---->
     // console.log(this.enteredUnitNumbers.toArray().map(x => x))
});

在console.log上方显示未定义.我的需求是，一旦对话框关闭，相应的单元号文本框应突出显示.

Above console.log shows undefined. My need is that once dialog box is closed the corresponding unit number textbox should be focused.

请提供解决方案

推荐答案

请执行以下操作:

enteredUnitNumbers.toArray()[0].nativeElement.focus();

用所需输入的索引替换0.

Replace 0 with the index of the desired input.

这篇关于Angular 4使用viewChildran在动态生成的文本框中设置焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！