如何在PrimeNG p-table（Angular）中实现单选框互斥选中

要实现同一时间仅选中一个单选框，核心是让所有单选框属于同一组，同时同步组件内的数据状态。这里有两种简单可行的方案：

方案一：利用原生单选框的name属性分组 + 数据同步 #

原生HTML单选框只要设置相同的name属性，就会自动实现互斥选中。我们只需要在点击时同步更新证书的active状态即可：

1. 修改模板中的单选框代码 #

<p-table *ngIf="certificates | async as certificates" [value]="certificates">
    <ng-template pTemplate="header">
        <tr>
            <th style="max-width: 40%">Name</th>
            <th style="max-width: 10%">Valid</th>
            <th style="max-width: 10%">Active</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-certificate>
        <p-skeleton *ngIf="loading"></p-skeleton>
        <tr *ngIf="!loading">
            <!-- 注意这里应该用<td>而不是<th>哦 -->
            <td>{{ certificate.name }}</td>
            <td>{{ certificate.pac }}</td>
            <td><i class="bi bi-check-lg"></i></td>
            <td>
                <input 
                    type="radio"
                    name="activeCertificateGroup"  <!-- 所有单选框用同一个name -->
                    [checked]="certificate.active"
                    (change)="setActiveCertificate(certificate, certificates)"
                />
            </td>
        </tr>
    </ng-template>
</p-table>

2. 在组件类中实现setActiveCertificate方法 #

setActiveCertificate(selectedCert: any, allCerts: any[]) {
    // 遍历所有证书，仅将选中的设为active，其他设为false
    allCerts.forEach(cert => {
        cert.active = cert.id === selectedCert.id;
    });
    // 调用你原来的getActiveStatus方法处理后续逻辑
    this.getActiveStatus(selectedCert);
}

方案二：使用ngModel绑定选中状态（更Angular风格） #

通过绑定一个组件变量来跟踪当前选中的证书ID，配合ngModel实现双向绑定，代码更简洁：

1. 组件类中定义跟踪变量 #

// 存储当前选中的证书ID
selectedCertificateId: number | undefined;
// 可选：如果需要缓存证书数组，可在订阅时初始化选中状态
certificates: any[] = [];

ngOnInit() {
    this.certificates$.subscribe(certs => {
        this.certificates = certs;
        // 初始化默认选中的证书（如果有的话）
        const defaultActive = certs.find(cert => cert.active);
        if (defaultActive) {
            this.selectedCertificateId = defaultActive.id;
        }
    });
}

2. 修改模板中的单选框 #

<input 
    type="radio"
    name="activeCertificateGroup"
    [value]="certificate.id"
    [(ngModel)]="selectedCertificateId"
    (change)="onActiveCertificateChange(certificate)"
/>

3. 实现状态变更方法 #

onActiveCertificateChange(selectedCert: any) {
    // 更新所有证书的active状态
    this.certificates.forEach(cert => {
        cert.active = cert.id === selectedCert.id;
    });
    this.getActiveStatus(selectedCert);
}

注意事项 #

• 确保每个证书有唯一的标识（比如id），用来判断选中状态
• 模板中<tr>里的{{ certificate.name }}应该用<td>而不是<th>，避免语义错误和样式问题
• 如果你的certificates是通过async管道异步加载的，要确保在数据加载完成后再初始化选中状态

内容的提问来源于stack exchange，提问作者Kate