Angular 4 模板可变焦点

Angular 4 template variable focus

我有这个单元格模板,可以将对象的值显示到 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>

当我点击我的编辑按钮时,我需要聚焦 select 文本。没问题。我有

@ViewChild('myInput') myInput;

private focusInput(){       
    this.myInput.nativeElement.focus();
    this.myInput.nativeElement.select();
}

问题是,如果我需要“同时”编辑 2 行,在单击第一行编辑按钮后,select编辑并聚焦,但是当我单击第二行的编辑按钮时,第一行input 再次获得焦点。 我认为 angular 找到第一个可用的 #myinput 元素并将它们聚焦,因为如果我首先单击第 5 行,它会正确聚焦,并且当前面的任何行被标记为编辑时,行为还好。

即使模板中存在其他#myinput,我如何才能使每一行都起作用?

如果你总共只有 2 个输入,我会调用第一个 #myInput1 和第二个 #myInput2,然后有两个 @ViewChild。 不清楚调用 focusInput 的内容,但正如@joseph-webber 提到的那样,您应该将索引传递给该调用,例如:

private focusInput(index){
    this['myInput' + index].nativeElement.focus();
    this['myInput' + index].nativeElement.select();
}

如果您有很多输入,这种方法可能会变得混乱,因此您可能需要使用 ViewChildren 而不是 ViewChild

您可以改用 @ViewChildren,它将 return QueryList 个匹配元素并根据需要更改它们的焦点。