primeng multiselection mode：条件に基づいてチェックボックスを無効にする条件を適用する方法

Question

<p-column header="Actions" selectionMode="multiple" [style]="{'width':'40px'}" ></p-column> 

私はプライマリデータテーブルで複数選択モードをオンにする上記の行を追加しました。条件に応じて特定のチェックボックスを無効にしたい。 これを処理する方法は？ [rowstyleclass]を使って同じことを試みましたが、特定の行にマウスを置いたときにevereytimeと呼ばれるため、パフォーマンス上の問題があります。 どのような解決策ですか？

Answer 1

これを実現するにはtemplatingを使用できます。テンプレート内のあなたの状態に基づいてチェックボックスを無効にするだけでよいです。

Answer 2

これを実現するには、列テンプレートを使用できます。ここにサンプルコードがあります。

ここで、すべての偶数行はロジックで無効になっています - [disabled] = "item.Id％2 == 0"、必要なロジックを配置できます。

your.component.html

<p-dataTable #dt [value]="persons"> 
<p-column field="" header="Select" [style]="{'width':'60px', 'align-items':'center'}"> 
    <ng-template let-col let-item="rowData" pTemplate="body"> 
     <p-checkbox [disabled]="item.Id%2 == 0" 
        [style]="{'align':'center'}" 
        name="persongroup" 
        [value]="item" 
        [(ngModel)]="selectedPersons"> 
     </p-checkbox> 
    </ng-template> 
</p-column> 
<p-column field="Id" header="Id"></p-column> 
<p-column field="Name" header="Name"></p-column> 
</p-datatable> 

your.component.ts

persons : Person[] = [ 
         {'Id' : 1, 'Name' :  'person1'}, 
         {'Id' : 2, 'Name' :  'person2'} 
        ]; 
selectedPersons : Person[]=[];