我正在尝试实现一个滑动功能来创建表之间的分页。如果向右滑动，您将转到下一页。如果您向左滑动，您将转到上一页。
下面是我的表的代码：

<table
 #tableElement
 id="zone-table-to-export-mobile"
 class="table mb-0"
>
 <tbody class="fs-4">
  <ng-container *ngIf="getZoneKey() as keysArray">
   <ng-container *ngIf="keysArray.length > 0">
    <ng-container *ngFor="let groupItem of keysArray">
     <tr>
      <td>{{ groupItem.group }}</td>
     </tr>
      <ng-container
       *ngFor="
       let key of getVisibleProps(groupItem.group)"
      >
       <tr>
        <td>{{ key }}</td>
        <td
         [innerHTML]="
         getZoneValue(
         statesResponse.zones[currentPage].groups, key)">
        </td>
       </tr>
     </ng-container>
    </ng-container>
   </ng-container>
  </ng-container>
 </tbody>
</table>

我认为这个问题与swipe只适用于DOM中的元素有关。在我的例子中，由于分页工作使用变量currentPage，当执行currentPage++时，每个页面的表内容都会出现。
我试图实现这段代码，但似乎不工作。我正在使用Chrome开发工具中的“切换设备工具栏”，不知道这是否是问题所在。

ngOnInit() {
  const gesture = this.gestureCtrl.create({
    el: document.querySelector('.table'), // Reemplaza con el selector correcto
    gestureName: 'swipe',
    onMove: (ev) => {
      const deltaX = ev.deltaX;
      
      const sensitivity = 50;
      
      if (Math.abs(deltaX) > sensitivity) {
        if (deltaX > 0) {
          this.changePage(-1);
        } else {
          this.changePage(1);
        }
      }
    },
  });
  gesture.enable(true);
}

changePage(increment: number) {
  const newPage = this.currentPage + increment;

  if (newPage >= 0 && newPage < totalPages) {
    this.currentPage = newPage;
  }
}

另一个问题与<table> HTML标记有关。如果我试图访问ngAfterViewInitlifecycle hook中的DOM元素，我会得到一个undefined或null。
我不想使用Hammer.js或其他第三方库。我想实现代码与 * 离子原生手势 *。可能它不起作用，因为我必须同时让DOM中的所有表都可用，一个在另一个之上。