处理 Angular 表中的复选框交互和分页

Question

我正在开发一个 Angular 应用程序，其中包含一个在服务器端实现分页的表格。表中的一列包含一个复选框，充当“全选”和“取消全选”功能。表中的每一行代表一个文档，具有自己的复选框以供单独选择。

我需要找到一种正确的方法来处理这些复选框之间的交互，同时考虑到分页功能。在页面之间导航时，应保留复选框状态。

具体来说，我想实现以下功能：

当至少选中一行复选框时，主复选框应具有三种状态：true（选中）、false（未选中）和 null（不确定）。 分页时，应保留复选框状态。 我也不确定在这种情况下与服务器通信的最佳方法。我应该发送文档 ID 吗？然而，在“全选”的情况下，我没有所有的 ID。

我正在使用 Angular，我正在使用的表库是 Taiga UI。

任何关于如何处理复选框交互和在分页期间维护状态的指导，以及与服务器通信的推荐方法，将不胜感激。

Answer 1

不知道 Taiga，但我在模型中放入了检查状态。 然后触发一个切换函数 selectUnSelectAll() 像这样：

<input type="checkbox" (click)="selectUnSelectAll()" />

selectUnSelectAll函数：

//class property toggleSelectAll...
 public toggleSelectAll: boolean = false;     
 
 selectUnSelectAll(): void {
  if (this.toggleSelectAll) {
    this.pullListData.forEach((dat) => {
      dat.selectedToPull = false;
    });
    this.toggleSelectAll = false;
  }
  else {
    this.pullListData.forEach((dat) => {
      dat.selectedToPull = true;
    });
    this.toggleSelectAll = true;
  }
}

听起来您还想将数据发送到端点以更新数据库...您也可以在用户离开时或单击“提交”按钮后触发。

状态反映在 HTML 中，如下所示（您可能不需要索引）：

<tr *ngFor="let pull of pullListData; let i=index;">
// <td>s and data...
    <input type="checkbox" [(ngModel)]="pull.selectedToPull" id="selectedToPull-{{i}}" name="selectedToPull-{{i}}" />

您不需要选择/取消全选复选框的“空”状态，但我想您可以将其设置为禁用该状态。 （但是什么时候启用？我认为用户知道该复选框仅选中所有或取消选中所有...然后他们可以根据需要选中/取消选中单个项目。）