typescript 如何禁用primeng数据表中的复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43972565/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to disable check box in primeng datatable
提问by Sahil Agarwal
I need to disable few checkboxes in primeng datatable based on condition:
我需要根据条件禁用primeng数据表中的几个复选框：
For example:
例如：
<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()">
But this doesn't seem to be working. There is feature request for the same on primeng forum: https://forum.primefaces.org/viewtopic.php?f=35&t=47101&p=155122&hilit=disable#p155122
但这似乎不起作用。在primeng论坛上有相同的功能请求：https://forum.primefaces.org/viewtopic.php ?f =35 &t =47101 &p =155122 &hilit =disable#p155122
Has anyone made a hack for this?
有没有人为此做过黑客？
回答by Aravind
You can use templating option
您可以使用模板选项
<p-column>
<ng-template let-col let-car="rowData" pTemplate="body">
<input type="checkbox" [disabled]="true"/>
</ng-template>
</p-column>
Update 1:
更新 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>
Selected Items
所选项目
checked(carValue){
console.log(carValue)
if(carValue.status){
this.selectedData.push(carValue);
}else {
_.remove(this.selectedData, function(val) {return val === carValue;})
}
Demo is updated accordingly LIVE DEMO
Demo 相应更新 LIVE DEMO
Update 1 : Check and CheckAll
更新 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 code
打字稿代码
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);
}
