angular - 如何禁用primeng数据表中的复选框

Question

我需要根据条件禁用 primeng 数据表中的几个复选框:

例如:

<p-column *ngFor="let col of cols; let i = index" [field]="col.field" [header]="col.header" [styleClass]="col.class" selectionMode="{{col.header==fields.BULKACTIONS.header ? 'multiple': ''}}" [disabled]="isDisabled()">

但这似乎不起作用。 primeng 论坛上有相同的功能请求:https://forum.primefaces.org/viewtopic.php?f=35&t=47101&p=155122&hilit=disable#p155122

有人为此做过破解吗？

Answer 1

您可以使用模板选项

<p-column>
       <ng-template let-col let-car="rowData" pTemplate="body">
       <input type="checkbox" [disabled]="true"/>
       </ng-template>
</p-column>

更新 1:

<p-dataTable (onRowSelect)="rowSelected($event)"

   [value]="tableData" [(selection)]="selectedData" dataKey="model" [responsive]="true">
     <p-column>
       <ng-template let-col let-car="rowData" pTemplate="body">
           <input type="checkbox" [checked]="car.status"  [(ngModel)]="car.status" (change)="checked(car)"/>
       </ng-template>
     </p-column>
    <p-column field="orderNumber" header="Order Number"></p-column>
    <p-column field="country" header="Country"></p-column>
</p-dataTable>

选定项目

 checked(carValue){
    console.log(carValue)
    if(carValue.status){
      this.selectedData.push(carValue);
    }else {
   _.remove(this.selectedData, function(val) {return val === carValue;})      

    }

Demo相应更新<强> LIVE DEMO

更新 1:检查和检查所有

<p-dataTable (onRowSelect)="rowSelected($event)"

   [value]="tableData" [responsive]="true">
     <p-column>
     <ng-template pTemplate="header">
           <input type="checkbox" [ngModel]="checkedAll" (ngModelChange)="checkAll($event)"/>
    </ng-template>
       <ng-template let-col let-car="rowData" pTemplate="body">
           <input type="checkbox" *ngIf="!car.disabled" [(ngModel)]="car.status" (change)="checked(car)"/>
           <input type="checkbox" *ngIf="car.disabled" [checked]="false" disabled (change)="checked(car)"/>
       </ng-template>
     </p-column>
    <p-column field="orderNumber" [header]="'Order Number'"></p-column>
    <p-column field="country" [header]="'Country'"></p-column>
</p-dataTable>

typescript 代码

  checked(carValue){
    if(carValue.status){
      this.selectedData.push(carValue);
    }else {
     _.remove(this.selectedData, function(val) {return val === carValue;})      
    }
    console.log(this.selectedData)

  }
  checkAll(event){

    _.forEach(this.tableData =>(item){
      if(event){
      item.status=true;
      }else {
        item.status=false;
      }

    });

    this.selectedData= this.tableData;
    if(!event){
      this.selectedData = [];
    }
    console.log(this.selectedData);
  }

LIVE DEMO