复选框，用于选中角度素数表中的所有复选框

Question

单击表格标题中的复选框时。然后应该选中表中的所有复选框。目前，我使用的是angular 12和prime NG表。

<p-table styleClass="text-sm" [value]="value" [loading]="loading" [rowHover]="true" [scrollable]="true" scrollDirection="both" class="p-element p-datatable-gridlines" (onLazyLoad)="onLazyLoad.emit($event)" [ngClass]="{'p-datatable-is-loading': loading}"
[paginator]="true" [rows]="10" [showCurrentPageReport]="true" responsiveLayout="scroll"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [rowsPerPageOptions]="[10,20,30]"
onPage="handlePageChange($event)">
<ng-template pTemplate="header">
<tr>
///////////////////// HERE THE CHECKBOX IN TABLE HEARDER///////////////////////////////
<th *ngIf="status!='all'" style="width: 40px" pFrozenColumn class="border-right-none">
<p-checkbox value="{{value.id}}" [(ngModel)]="selectedLeaves" (onChange)="allSelect(value)"></p-checkbox>
</th>
<th *ngIf="state!=_componentState.VIEW" style="width: 30px" pFrozenColumn class="border-right-none"></th>
<th style="width: calc(358px / 2)" pFrozenColumn class="border-left-none">From</th>
<th style="width: calc(358px / 2)" pFrozenColumn class="p-frozen-column-last border-right-none">To</th>
<th style="width: 180px">Department</th>
<th pSortableColumn="created_at" style="width: 100px">Date Field<p-sortIcon field="created_at"></p-sortIcon></th>
<th style="width: 100px" class="border-left-none">Day</th>
<th style="width: 180px">Employee Name</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-leave let-rowIndex="rowIndex">
<tr [class]="{'passed-date': helper.isPassedCurrentDate(leave.leave_from)}" (dblclick)="handleDblClickRow(leave)">
///////////////////// HERE THE CHECKBOX IN TABLE DETAILS///////////////////////////////
<td  *ngIf="status!='all'" style="width: 40px" pFrozenColumn class="border-right-none">
<div *ngIf="status!='all'">
<p-checkbox name="group1" value="{{leave.id}}" [(ngModel)]="selectedLeaves" inputId="ch"></p-checkbox>
</div>
</td>
<td  *ngIf="state!=_componentState.VIEW" style="width: 30px" pFrozenColumn class="border-right-none">
<div *ngIf="state==_componentState.ALL">
<div class="{{leave.status}}-dot"></div>
</div>
</td>
<td style="width: calc(358px / 2)" pFrozenColumn class="border-left-none">{{helper.formatDate(leave.leave_from, 'MMM D, YYYY HH:mm', false)}}</td>
<td style="width: calc(358px / 2)" pFrozenColumn class="p-frozen-column-last border-right-none">{{helper.formatDate(leave.leave_to, 'MMM D, YYYY HH:mm', false)}}</td>
<td style="width: 180px"></td>
<td style="width: 100px" class="border-left-none">{{helper.formatDate(leave.created_at, 'MM/DD')}}</td>
<td style="width: 100px">{{helper.formatDate(leave.created_at, 'ddd')}}</td>
<td style="width: 180px" class="text-capitalize">{{leave.employee_name}}</td>
</tr>
</ng-template>

我想使用这种方法allSelect(value)举个例子，当我点击桌面复选框时，所有复选框都应该被自动选中。我不想使用primeNG table选择。

https://stackblitz.com/edit/primeng-tableselection-demo你可以从这个例子中查看

Answer 1

如果我答对了你的问题，下面是实现你想要的目标的步骤。

<p-table #table [columns]="columns" [value]="dataSourceData" [lazy]="false" [showCurrentPageReport]="true"
[paginator]="true" paginatorDropdownAppendTo="body" [rows]="pageSize" [totalRecords]="totalRecords"
dataKey="Id" sortMode="single" filterDelay="0"
[rowsPerPageOptions]="rowsPerPageOptions" [responsive]="true" selectionMode="multiple"
[(selection)]="selectedDataRows" class="datatable-container">
<ng-template pTemplate="colgroup" let-columns>
<colgroup>
<col *ngFor="let col of columns" [style.width]="col.width" />
</colgroup>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" [pSortableColumn]="col.field" [pSortableColumnDisabled]="!col.sortable">
<a href="#" *ngIf="col.isRowSelector" (click)="selectAll($event)">{{ col.header}}</a>
<span *ngIf="!col.isRowSelector" [pTooltip]="col.header" tooltipPosition="top">{{ col.header }}</span>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
<tr [pSelectableRow]="rowData" [pSelectableRowIndex]="rowIndex" class="table-row">
<td *ngFor="let col of columns" class="text-truncate" [ngSwitch]="col.field"
[pTooltip]="col.tooltip ? col.tooltip(rowData[col.field]) : rowData[col.field]" tooltipPosition="top">
<p-tableCheckbox *ngIf="col.isRowSelector" [pSelectableRow]="rowData" [value]="rowData"></p-tableCheckbox>
<span *ngIf="!col.isRowSelector">{{ rowData[col.field] }}</span>
</td>
</tr>
</ng-template>
</p-table>

并且在你的代码中

1. 定义您的列

   columns: Array<IColumn> = [
   { field: 'selectAll', header: 'Select All', sortable: false, width: '12%', isRowSelector: true }
   ];
   

2. 添加SelectAll方法

   selectAll(event: PointerEvent): void {
   event.preventDefault()
   this.selectedDataRows = this.dataSourceData.slice();
   }
   

因此，当单击全选按钮时，所有数据源项目都将被捕获到一个新对象中"；selectedDataRows"其作为表的选择属性被传递给表。

希望这对你有用。