Angular 4模板可变焦点
Posted
技术标签:
【中文标题】Angular 4模板可变焦点【英文标题】:Angular 4 template variable focus 【发布时间】:2018-12-26 17:25:11 【问题描述】:我有这个单元格模板,它将对象的值显示到 span 元素中,或者,如果行正在编辑,则显示输入中的值。
<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row" let-value="value">
<span
*ngIf="!editing[rowIndex]">
value
</span>
<input
#myInput
autofocus
(blur)="setValue($event, value , row)"
*ngIf="editing[rowIndex]"
type="text"
[value]="value"
/>
</ng-template>
当我单击编辑按钮时,我需要聚焦并选择文本。没问题。我有
@ViewChild('myInput') myInput;
和
private focusInput()
this.myInput.nativeElement.focus();
this.myInput.nativeElement.select();
问题是,如果我需要“同时”编辑 2 行,在单击第 1 行编辑按钮后,被选中并获得焦点,但是当我单击第 2 行的编辑按钮时,第一个输入再次获得焦点。 我认为找到第一个可用的#myinput 元素并聚焦它们是有角度的,因为如果我首先单击第 5 行,它会正确聚焦,并且当任何先前的行被标记为编辑时,行为都很好。
即使模板中存在其他#myinput,我如何才能使每一行都有效?
【问题讨论】:
为每个输入创建一个唯一的角度模板引用变量,并将您想要关注的那个传递给focusInput
。
【参考方案1】:
如果您总共只有 2 个输入,我会调用第一个 #myInput1
和第二个 #myInput2
,然后有两个 @ViewChild
s。
不清楚什么叫focusInput
,但正如@joseph-webber 提到的,您应该将索引传递给该调用,例如:
private focusInput(index)
this['myInput' + index].nativeElement.focus();
this['myInput' + index].nativeElement.select();
如果您有很多输入,这种方法可能会变得混乱,因此您可能需要使用 ViewChildren 而不是 ViewChild
【讨论】:
查看孩子没问题! Tnk的【参考方案2】:您可以改用@ViewChildren
,它将返回匹配元素的QueryList
,并根据需要更改它们的焦点。
【讨论】:
以上是关于Angular 4模板可变焦点的主要内容,如果未能解决你的问题,请参考以下文章