如何使用 PrimeNG p-table angular 使只有一个单选按钮可点击

Question

我正在使用 PrimeNg table 来展示我的项目。

<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">
        <th>{{ certificate.name }}</th>
        <td>{{ certificate.pac }}</td>
        <td><i class="bi bi-check-lg"></i></td>
        <td>
          <input
            (click)="getActiveStatus(certificate)"
            [checked]="certificate.active"
            type="radio"
          />
        </td>
      </tr>
    </ng-template>
</p-table>

我希望只能选择一个单选按钮。现在我可以单击 select 我所有的单选按钮，但我不希望出现这种情况。有谁知道如何一次只能 select 编辑一个单选按钮？

Answer 1

尝试将具有相同值的“名称”属性附加到所有单选按钮：

  <input
    (click)="getActiveStatus(certificate)"
    [checked]="certificate.active"
    type="radio"
    name="group1"
  />

如何使用 PrimeNG p-table angular 使只有一个单选按钮可点击

How to make only one radiobutton clickable with PrimeNG p-table angular

radio-button

checked

primeng

angular