javascript - PrimeNg tablosunda onay kutusu seçimi ve satır seçimini birlikte kullanma

PrimeNg tablo bileşenini kullanıyorum ve satır seçimini uygulamam gerekiyor. Şu koda sahibim:

    <p-table
        [value]="data"
        [columns]="columns"
        [(selection)]="selectedItems"
        selectionMode="multiple">
    <ng-template pTemplate="header">
        <tr>
            <th>
                <p-tableHeaderCheckbox style="margin-left: 5px;"></p-tableHeaderCheckbox>
            </th>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-row>
        <tr [pSelectableRow]="row">
            <td>
                <p-tableCheckbox [value]="row"></p-tableCheckbox>
            </td>
            <td>Value 1</td>
            <td>Value 2</td>
        </tr>
    </ng-template>
</p-table>

Temelde, burada belgede verilen şekilde Checkbox seçimi ve metakey olmadan çoklu seçimi kullanıyorum. Şimdi satıra tıkladığımda, satır seçiliyor ve onay kutusu da işaretleniyor. Ama onay kutusuna tıkladığımda seçilmiyor. Tümünü Seçe tıkladığımda ise tüm satırları seçiyor. Geliştirici Araçlarıyla kontrol ettiğimde, tıklama algılanmasına rağmen aria-checked değerini true yapmıyor.

Bu sorunu düzeltmek için herhangi bir çözüm yolu var mı?

Cevap #1

@Arun’un cevabı doğru. Sadece, bu sorunla karşılaşan ve zamanı kısıtlı olan birine yardımcı olması için biraz biçimlendirme ekliyorum ;) :

<ng-template pTemplate="body" let-data>
    <tr [pSelectableRow]="data">
       <td>
          <p-tableCheckbox [pSelectableRow]="data" [value]="data"></p-tableCheckbox>
       </td>
    </tr>
</ng-template>

tableCheckbox'e [index] sağlamadan da iyi çalışır.

Cevap #2

Evet, R.Richards haklı, dataKey eklemek sorunu çözmelidir. Ama yine de dataKey olmadan, sadece satır onay kutunuzla bunu ekleyin: <p-tableCheckbox [value]="row" [pSelectableRow]="row"></p-tableCheckbox>. Hatırladığım kadarıyla daha önce kodumla bu şekilde bir şey yapmıştım, bu çalışmalıdır:)

İlgili makaleler