单选不适用于 p-table 中的复选框

Question

我的 table selectionmode 设置为单模式，但单模式无法像预期的那样与 p-tableCheckbox 一起使用，就像单选按钮的单个 selection。如果我有复选框，我只能使用 multi select 但我想使用 single selection 模式。如何通过我的 code.Thanks 提前实现

我的 html :

<p-table #dt [value]="customers" selectionMode="single" dataKey="id" [(selection)]="selectedRecord" styleClass="ui-table-customers" [rowHover]="true" [rows]="10" [showCurrentPageReport]="true" [rowsPerPageOptions]="[10,25,50]" [loading]="loading" [paginator]="true"
currentPageReportTemplate="{first}" [filterDelay]="0"
[globalFilterFields]="['name','date','status']">
<ng-template pTemplate="header">
    <tr>
        <th></th>
        <th pSortableColumn="name">{{'isim' | translate}}
          <p-sortIcon field="name"></p-sortIcon>
        </th>
    </tr>
    <tr>
        <th></th>
        <th>
            <input pInputText type="text" (input)="dt.filter($event.target.value, 'name', 'startsWith')" [placeholder]="'isimilearama' | translate" class="ui-column-filter">
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-customer>
        <tr class="ui-selectable-row">
            <td>
                <p-tableCheckbox [value]="customer"></p-tableCheckbox>
            </td>
            <td>
                <span class="ui-column-title">name</span> {{customer.name}}
            </td>
        </tr>
    </ng-template>
</p-table>

我的 ts 文件：

import { Component, OnInit, ViewChild } from '@angular/core';
import { Table } from 'primeng/table/table';
import { TranslatePipe } from 'src/app/pipelar/translate.pipe';

@Component({
  selector: 'app-gorevler',
  templateUrl: './gorevler.component.html',
  styleUrls: ['./gorevler.component.scss']
})
export class GorevlerComponent implements OnInit {

  customers: Customer[];
  loading: boolean = true;
  @ViewChild('dt') table: Table;
  exportColumns: any[];
  selectedRecord: any;

  constructor() {
  }

  ngOnInit(): void {
    this.customers = [
      { id: 1, name: "samet", date: new Date().toLocaleString(), status: "new" },
      { id: 2, name: "busra", date: new Date().toLocaleString(), status: "new" },
      { id: 3, name: "aslı", date: new Date().toLocaleString(), status: "new" },
      { id: 4, name: "pelin", date: new Date().toLocaleString(), status: "done" },
      { id: 5, name: "ceyda", date: new Date().toLocaleString(), status: "done" }
    ];
    this.loading = false;
    console.log(this.selectedRecord);
  }
}

interface Customer {
  id?: number;
  name: string;
  date?: string;
  status?: string;
}

Answer 1

作为一种方法，您可以将具有相同参数的 ngModel 添加到每个复选框，然后为每个复选框提供更改事件 demo

<p-checkbox(onChange)="onChange()"[(ngModel)]="choosenCustomer" name="group" [value]="customer"></p-checkbox>

然后

onChange() {
    const choosen= this.choosenCustomer[this.choosenCustomer.length - 1];   
    this.choosenCustomer.length = 0;
    this.choosenCustomer.push(choosen);
  }

单选不适用于 p-table 中的复选框

single selection not working for checkbox in p-table

primeng

angular