Переменный фокус шаблона Angular 4

У меня есть этот шаблон ячейки, который показывает значение объекта в элементе 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-й строки, 1-й ввод снова получает фокус. Я думаю, что angular находит первый доступный элемент #myinput и фокусирует его, потому что, если я щелкну строку номер 5 в первую очередь, она правильно сфокусируется, и когда любая из предыдущих строк помечена для редактирования, поведение в порядке.

Как я могу заставить это работать для каждой строки, даже если в шаблоне присутствуют другие #myinput?


angular template-variables
person federhico    schedule 18.07.2018    source источник
comment
Создайте уникальную ссылочную переменную шаблона angular для каждого входа и передайте ту, на которую вы хотите сфокусироваться, focusInput.   -  person Joseph Webber    schedule 23.07.2018

Ответы (2)


arrow_upward
1
arrow_downward

Если у вас всего 2 входа, я бы назвал первый #myInput1, второй #myInput2, а затем два @ViewChild. Непонятно, что вызывает focusInput, но, как упомянул @joseph-webber, вы должны передать индекс этому вызову, например:

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

если у вас много входных данных, этот подход может запутаться, поэтому вместо этого вам может понадобиться использовать ViewChildren ViewChild

person simonberry    schedule 24.07.2018
comment
Просмотр Дети были в порядке! ТНК - person federhico; 25.07.2018

arrow_upward
0
arrow_downward

Вместо этого вы можете использовать @ViewChildren, который вернет QueryList совпадающих элементов и изменит их фокус по мере необходимости.

person kemsky    schedule 25.07.2018