select 的復選框 angular 底漆表中的所有復選框

Question

當我單擊表 header 中的復選框時。 然后應該檢查表中的所有復選框。 目前，我正在使用 angular 12 和 primeNG 表。

<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

不同點到 select 所有復選框值根據 header 復選框

1. 使用 header 復選框的 ngModel 恢復選中的值
2. 每個復選框都應該有自己的 ngModel

你的代碼變成了：

在 header

 <th *ngIf="status!='all'" style="width: 40px" pFrozenColumn class="border-right-none">
    <p-checkbox value="{{value.id}}" [(ngModel)]="selectedLeaves" (onChange)="allSelect()"></p-checkbox>
 </th>

復選框列表

 <td  *ngIf="status!='all'" style="width: 40px" pFrozenColumn class="border-right-none">
        <div *ngIf="status!='all'">
          <p-checkbox name="group1" value="{{leave.id}}" [(ngModel)]="group1SelectedLeaves" inputId="ch"></p-checkbox>
        </div>
      </td>

在 controller

group1SelectedLeaves = boolean = false;

allSelect() {
   group1SelectedLeaves = this.selectedLeaves;
}

Answer 2

        Here are steps to achieve what you wanna, if I got your question correctly.
        
        <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>
    
    and in your code
    1- define your columns
     columns: Array<IColumn> = [
        { field: 'selectAll', header: 'Select All', sortable: false, width: '12%', isRowSelector: true }
    ];

    2- Add SelectAll Method

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

因此，當單擊 select 全部按鈕時，所有數據源項都將被捕獲到一個新的 object“selectedDataRows”中，它作為其選擇屬性傳遞給表。

希望這對你有用。