Question

我在组件中有一个带有输入字段的p表。填充输入并将剩余的数据发送到数据库后，我想通过单击“制表符”设置到下一个可聚焦的输入（如excel中）来设置输入的焦点。

我需要通过指令执行此操作吗？

<ng-template pTemplate="body" class="tableBody" let-rowData let-x="rowIndex" let-columns="columns">
   <tr [pSelectableRow]="rowData" [ngClass]="rowData.editable != 'true' ? 'cell-color-gray2' : null" [hidden]="!showSubTotal(rowData)">
      <td *ngFor="let col of columns; let i = index" class="ui-resizable-column" [pEditableColumn]="rowData[col.field]" [pEditableColumnField]="rowData[col.field]">
         <p-cellEditor>
            <ng-template pTemplate="input">
               <div *ngIf="menuLabels.state=='editable' && rowData.editable=='true'">
                  <div *ngIf="col.field=='customEffort'" class="tableColumnRight">
                     <input #inputs type="text" ngDefaultControl [(ngModel)]="this.rowData.effort" autoResize="autoResize"
                            (focusout)="workaroundUpdateDataEffort({ data: rowData, costCenterNr: col.header.split(' ')[0], columns: columns }, x, i)"
                            (keydown.tab)="workaroundUpdateDataEffort({ data: rowData, costCenterNr: col.header.split(' ')[0], columns: columns }, x, i)"
                            (keydown.enter)="workaroundUpdateDataEffort({ data: rowData, costCenterNr: col.header.split(' ')[0] })"
                            (keydown.esc)="workaroundCatchEsc({ data: rowData })">
                  </div>

Answer 1

您可以使用指令，但不一定需要，您也可以通过事件来触发它。您需要的是对您要关注的HTML元素的引用。您可以使用ViewChild来做到这一点：

location = 'http://example.com/';

为了使它起作用，您必须在html中设置一个ref-id：

window.location.href= 'http://example.com/';

现在，在代码中的某处调用REST服务：

@ViewChild('tab') inputEl:ElementRef;

这里是demo on stackblitz

插入值时，将焦点p表设置为下一个输入

1 个答案: