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键在'Column 2'文本输入（单元格）上上下移动。

Answer 1

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

要做到这一点，你需要完成一些事情：

绑定到关键事件并在其上运行一个函数
跟踪索引并将其传递给函数
获取元素的引用并调用它们的焦点方法
把它们放在一起

第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中提供的特殊变量，它给出了当前项索引。他们还揭露了其他一些可以声明和使用的第一个和最后一个。

第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转换为flat索引的逻辑，这样我就可以在viewchildren列表中找到正确的引用并在其上调用focus（）。我需要所有元素引用始终存在的原因是因为否则正确的平面索引将更难从x，y中找出。如果你真的需要他们不在那里，那么你可以修改这个逻辑，使其工作。根本不可能。你也可以修改它以便很容易地“包裹”在行周围。

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

键入Angular 2 \ 4表格

1 个答案: