1

我有这个单元格模板，它将对象的值显示到 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，我如何才能使每一行都有效？

4

2 回答 2

1

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

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

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

于 2018-07-24T08:23:46.497 回答
0

您可以@ViewChildren改为使用它，它将返回QueryList匹配的元素并根据需要更改它们的焦点。

于 2018-07-25T12:52:35.183 回答