在 Angular 2 \ 4 表中向上键

Question

如何在 Angular 的表格单元格中编写向上键和向下键的功能？（就像我们如何使用向上和向下箭头键在 Excel 工作表中的单元格中移动键一样）。

这是我的代码：http : //plnkr.co/edit/vk937A1VWNPIFQYkoPsM?p=preview

<table>
      <thead>
            <tr>
                 <th class="under-below" *ngFor="let col of columns">{{col.display}}</th>
            </tr>
        </thead>

        <tbody>
            <tr *ngFor="let row of rows">
                <td *ngFor="let col of columns">

                <div *ngIf="!col.editable">{{colLabelFunction(row, col)}}</div>
                <input type="text" value="{{colLabelFunction(row, col)}}" *ngIf="col.editable">

                </td>

            </tr>


        </tbody>
      </table>

我想使用 keyup 和 keydown 键在“第 2 列”文本输入（单元格）上上下移动。

Answer 1

我只是注意到我比你想要的更进一步，并添加了右/左功能。如果你愿意，你可以把它们剪掉。

为此，您需要完成以下几件事：

1. 绑定到关键事件并对它们运行一个函数
2. 跟踪您的索引并将它们传递给函数
3. 获取对元素的引用并对其调用 focus 方法
4. 把它们放在一起

第 1 项：绑定关键事件和运行函数

Angular 提供了简单易用的事件绑定，如下所示：

<input #inputs type="text" value="{{colLabelFunction(row, col)}}" [class.hidden]="!col.editable" 
      (keyup.arrowdown)="shiftFocusDown(rowIdx, colIdx)"  
      (keyup.arrowup)="shiftFocusUp(rowIdx, colIdx)"
      (keyup.arrowright)="shiftFocusRight(rowIdx, colIdx)"
      (keyup.arrowleft)="shiftFocusLeft(rowIdx, colIdx)">

keyup 事件是通用的，然后 arrowdown 等是 angular 提供的速记。然后您只需设置要使用任何参数触发的功能。

项目 2 跟踪您的索引并传递给函数

您可以在上面看到我在这些事件上调用函数并传递 rowIdx 和 colIdx，要获取这些变量，您可以在 ngFor 中声明它们，例如：

<tr *ngFor="let row of rows; let rowIdx = index">
     <td *ngFor="let col of columns; let colIdx = index">

index 是 ngFor 中提供的一个特殊变量，它给出了当前项目的索引。它们还公开了一些其他的，例如 first 和 last，您可以声明和使用它们。

第 3 项：获取元素引用

为此，我们必须做一些事情，您可能已经在上面注意到，我没有在输入上使用 ngIf，而是设置了 class.disabled，然后我添加了 CSS 来隐藏类隐藏在组件声明中的元素，例如：

 styles: [`.hidden { display: none; }`]

我这样做是为了元素引用永远不会改变，原因稍后会很明显，我做的另一件事是将#inputs 添加到每个输入项，这是我可以在组件代码中访问的模板引用：

@ViewChildren('inputs') inputs;

视图子项可以采用几种不同类型的参数，在这种情况下，它采用一个字符串，它将在模板中搜索与该字符串匹配的任何模板引用，并将它们返回到查询列表中。

第 4 项：把它放在一起

我现在有适当的函数可以在所需的键事件上执行，具有所需的参数，以及所有输入元素引用的平面列表。

现在我只需要编写代码来完成这项工作：

focusInput(rowIdx: number, colIdx: number) {
  console.log(rowIdx, colIdx);
  // convert ViewChildren querylist to an array to access by index
  let inputEls = this.inputs.toArray();
  // get the flat index from row/cols
  let flatIdx = (rowIdx * this.columns.length) + colIdx;
  // get that reference from the input array and use the native element focus() method
  inputEls[flatIdx].nativeElement.focus();
}

shiftFocusDown(rowIdx:number, colIdx:number) {
  console.log("DOWN", colIdx, rowIdx)
  // add 1 but don't go beyond my row range
  rowIdx = Math.min(rowIdx + 1, this.rows.length - 1);
  this.focusInput(rowIdx, colIdx);
}

shiftFocusUp(rowIdx:number, colIdx:number) {
  console.log("UP", colIdx, rowIdx);
  // up 1, but not less than 0
  rowIdx = Math.max(0, rowIdx - 1);
  this.focusInput(rowIdx, colIdx);
}

shiftFocusLeft(rowIdx:number, colIdx:number) {
  console.log("LEFT", rowIdx, colIdx);
  // left one column, and correct for non editable columns to left
  colIdx = colIdx - 1 - this.columns.slice(0, colIdx).reverse().findIndex(c => c.editable);
  // don't need edge check bc findIndex returns -1 if none found or no items, so that corrects us back to start col automatically
  this.focusInput(rowIdx, colIdx);
}

shiftFocusRight(rowIdx:number, colIdx:number) {
  console.log("RIGHT", rowIdx, colIdx);
  // right one column, and correct for non editable columns to right
  colIdx = colIdx + 1 + this.columns.slice(colIdx + 1).findIndex(c => c.editable);
  // don't need edge check bc findIndex returns -1 if none found or out of range, so that corrects us back to start col automatically
  this.focusInput(rowIdx, colIdx);
}

这里的代码主要是找到下一个合适的 col/row 索引然后将该 x,y 转换为平面索引的逻辑，这样我就可以在我的 viewchildren 列表中找到正确的引用并调用它的 focus() 。我需要所有元素引用始终存在的原因是因为否则将很难从 x,y 中找出正确的平面索引。如果您真的需要它们不在那里，那么您可以修改此逻辑以使其工作。并非不可能。您还可以修改它以允许非常轻松地“环绕”行。

完成 plunkr：http ://plnkr.co/edit/m4BRi5rh5gYuvlKfwhqk?p=preview