Angular 4 使用 viewChildran 在动态生成的文本框中设置焦点

标签 angular typescript ngfor viewchild

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

<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。

我的尝试是

@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 显示未定义。我的需要是,一旦对话框关闭,相应的单元号文本框就应该成为焦点。

请给出解决方案

最佳答案

应该做到以下几点:

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

0 替换为所需输入的索引。

关于Angular 4 使用 viewChildran 在动态生成的文本框中设置焦点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52898230/

相关文章:

node.js - webpack 编译出错

typescript - 定义另一个属性时需要一个属性(有区别的联合)

javascript - 使用 WebPack + TypeScript 定义导入的外部模块

Angular trackBy 不适用于嵌套 *ngFor

javascript - 如何正确地将 HttpClient 请求的结果多播到 Angular 中的多个组件?

javascript - 仅在托管应用程序时出现错误,但在本地主机中则不会出现错误

angular - 为什么在将 Formarray 添加到嵌套表单时会得到一个数组

css - 如何正确使用 window.scrollY

javascript - 在 ngFor 中计数 - Angular 2