Angular16+PrimeNG实现p-table列单选全选互斥功能求助

需求说明 #

在Angular 16 + PrimeNG的p-table中实现以下功能：

• 表头三个「全选」单选按钮互斥
• 点击某列全选按钮时，选中该列所有行的单选按钮，同时取消另外两列的选中状态
• 已实现每行内三列单选按钮的互斥功能，项目已安装jQuery

尝试的代码及问题 #

组件TS代码 #

onCheckAll(e) {   
    
    if (e.hasClass('allPrimary'))
    {
     $('.primary').prop('checked', true)
    }
    else if (e.hasClass('allSecondary'))
    {
     $('.secondary').prop('checked', true)
    }
    else (if (e.hasClass('allNotAuthorized'))
    {
     $('.notInCounty').prop('checked', true)
    }        
  }

模板HTML代码 #

<ng-template pTemplate="header">
    <tr>
        <th pResizableColumn >County</th>
        <th pResizableColumn style="text-align:center">Primary
            <br />
            <p-radioButton
                name="all"
                class="allPrimary"                                            
                (click)="onCheckAll($(this))"                                             
            >
            </p-radioButton>
        </th>
        <th pResizableColumn style="text-align:center">Secondary
            <br />
            <p-radioButton
                name="all"
                class="allSecondary"                                            
                (click)="onCheckAll($(this))">
            </p-radioButton>
        </th>
        <th pResizableColumn style="text-align:center">Not Authorized
            <br />
            <p-radioButton
                name="all"
                class="allNotAuthorized"                                            
                (click)="onCheckAll($(this))">
            </p-radioButton>
        </th>
    </tr>
</ng-template>
<ng-template pTemplate="body" let-areaOfOperationAll let-rowIndex="rowIndex">
    <tr>
        <td >
            {{areaOfOperationAll.County.DisplayName}}                                    
        </td>
        <td style="text-align:center">                                        
            <p-radioButton
                name="county-primary-{{rowIndex}}"
                class="primary"
                [value]="true"
                [(ngModel)]="areaOfOperationAll.IsRankPrimary"                                   
                inputId="county-primary-{{rowIndex}}"
                (click)="onRankChange('IsRankPrimary',rowIndex)">
            </p-radioButton>
        </td>
        <td style="text-align:center">
            <p-radioButton
                name="county-secondary-{{rowIndex}}"
                class="secondary"
                [value]="true"
                [(ngModel)]="areaOfOperationAll.IsRankSecondary"
                inputId="county-secondary-{{rowIndex}}"
                (click)="onRankChange('IsRankSecondary',rowIndex)">
            </p-radioButton>
        </td>
        <td style="text-align:center">
            <p-radioButton
                name="county-na-{{rowIndex}}"
                class="notInCounty"
                [value]="true"
                [(ngModel)]="areaOfOperationAll.IsRankVendorNotInCounty"
                inputId="county-na-{{rowIndex}}"
                (click)="onRankChange('IsRankVendorNotInCounty',rowIndex)">
            </p-radioButton>                                    
        </td>
    </tr>
</ng-template>

遇到的问题 #

• 调用(click)="onCheckAll($(this))"时，$出现红色波浪线（模板中无法直接使用jQuery的$）
• 改为(click)="onCheckAll(this)"后，控制台报错TypeError: e.hasClass is not function（原生DOM元素没有hasClass方法）

正确实现方案 #

方案一：修复jQuery调用方式 #

1. 组件中引入jQuery：确保已安装@types/jquery，并在组件中导入

import * as $ from 'jquery';

2. 修改模板点击事件：传递原生事件对象，而非this

<p-radioButton
    name="all"
    class="allPrimary"                                            
    (click)="onCheckAll($event)"                                             
>
</p-radioButton>
<!-- Secondary和Not Authorized列的单选按钮做同样修改 -->

3. 更新TS方法：通过事件对象获取目标元素，用jQuery包装后操作，同时同步更新绑定的数据源

onCheckAll(event: MouseEvent) {
    const $target = $(event.target);
    
    // 先取消所有列的选中状态
    $('.primary, .secondary, .notInCounty').prop('checked', false);

    if ($target.closest('.allPrimary').length) {
        $('.primary').prop('checked', true);
        // 同步ngModel绑定的变量，确保视图与数据一致
        this.areaOfOperationList.forEach(item => {
            item.IsRankPrimary = true;
            item.IsRankSecondary = false;
            item.IsRankVendorNotInCounty = false;
        });
    } else if ($target.closest('.allSecondary').length) {
        $('.secondary').prop('checked', true);
        this.areaOfOperationList.forEach(item => {
            item.IsRankPrimary = false;
            item.IsRankSecondary = true;
            item.IsRankVendorNotInCounty = false;
        });
    } else if ($target.closest('.allNotAuthorized').length) {
        $('.notInCounty').prop('checked', true);
        this.areaOfOperationList.forEach(item => {
            item.IsRankPrimary = false;
            item.IsRankSecondary = false;
            item.IsRankVendorNotInCounty = true;
        });
    }
}

方案二：纯Angular响应式实现（推荐） #

完全基于数据绑定，避免操作DOM，更符合Angular设计理念：

1. 修改表头模板：给表头单选按钮绑定ngModel，利用name属性实现互斥

<ng-template pTemplate="header">
    <tr>
        <th pResizableColumn>County</th>
        <th pResizableColumn style="text-align:center">Primary
            <br />
            <p-radioButton
                name="all"
                [(ngModel)]="selectedAllType"
                value="primary"
            >
            </p-radioButton>
        </th>
        <th pResizableColumn style="text-align:center">Secondary
            <br />
            <p-radioButton
                name="all"
                [(ngModel)]="selectedAllType"
                value="secondary"
            >
            </p-radioButton>
        </th>
        <th pResizableColumn style="text-align:center">Not Authorized
            <br />
            <p-radioButton
                name="all"
                [(ngModel)]="selectedAllType"
                value="notAuthorized"
            >
            </p-radioButton>
        </th>
    </tr>
</ng-template>

2. 组件中处理数据更新：监听selectedAllType的变化，批量更新列表数据

// 定义变量存储选中的全选类型
selectedAllType: string | null = null;
// 假设你的表格数据源是areaOfOperationList
areaOfOperationList: any[] = [];

// 使用setter监听变量变化
set selectedAllType(type: string | null) {
    this._selectedAllType = type;
    if (!type) return;
    
    // 批量更新每行的选中状态
    this.areaOfOperationList.forEach(item => {
        item.IsRankPrimary = type === 'primary';
        item.IsRankSecondary = type === 'secondary';
        item.IsRankVendorNotInCounty = type === 'notAuthorized';
    });
}
get selectedAllType(): string | null {
    return this._selectedAllType;
}
private _selectedAllType: string | null = null;

3. 表格体保持原有绑定：无需修改，数据变化会自动同步到视图

内容的提问来源于stack exchange，提问作者Jeff O'Connell