Angular & ng2-smart-table：多重选择模式复选框禁用

Question

我正在使用ng2-smart-table来显示一些数据，我将选择模式设置为"多"，以便在左侧有复选框。在数据中，我有一个对象数组，这些对象带有一个属性"set"，它是一个布尔值，可以是真或假，如果 set 属性为 true，如何禁用复选框？有没有办法做到这一点？

我已经尝试制作一个新的渲染组件等，但后来我失去了 selectAll 功能以及渲染组件，选择行的工作方式不同。

这是一个链接：https://stackblitz.com/edit/angular-ndmxxg

Answer 1

我在顶部放了一个按钮，该按钮初始化为true，当您按下它时，它将禁用所有复选框;

注意：我在单击按钮时进行了设置，以便您看到它的实际效果;如果您想在从父级获取布尔变量后或默认情况下执行此操作，则必须在ngAfterViewInit()中执行此操作......因为我们必须等待ng2-smart-table渲染并准备就绪;我也在我的堆栈闪电战中留下了评论;

相关网页：

<h3>
Event Response in Console
</h3>
<button (click)="onClick()"> Disable checkbox </button>
<hr/>
<ng2-smart-table [settings]="settings" [source]="data" (deleteConfirm)="onDeleteConfirm($event)" (editConfirm)="onSaveConfirm($event)"
(createConfirm)="onCreateConfirm($event)" (userRowSelect)="onRowSelect($event)"> 

相关TS：

import { Component, Renderer2, ElementRef, ViewChild } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
selectedMode: boolean = true;
// This will contain selected rows
selectedRows: any;
constructor(private renderer2: Renderer2, private e: ElementRef) { }
ngAfterViewInit() { }
disableCheckboxes() {
var checkbox = this.e.nativeElement.querySelectorAll('input[type=checkbox]');
checkbox.forEach((element, index) => {
/* disable the select all checkbox */
if (index ==0){this.renderer2.setAttribute(element, "disabled", "true");}
/* disable the checkbox if set column is false */
if (index >0 && this.data[index-1].set == false) {
this.renderer2.setAttribute(element, "disabled", "true");
}
});
}
settings = {
selectMode: 'multi',
delete: {
confirmDelete: true,
deleteButtonContent: 'Delete data',
saveButtonContent: 'save',
cancelButtonContent: 'cancel'
},
add: {
confirmCreate: true,
},
edit: {
confirmSave: true,
},
columns: {
id: {        title: 'ID',      },
name: {        title: 'Full Name',      },
email: {        title: 'Email',      },
set: {        title: 'Set',      }
},
};
data = [
{
id: 1,
name: "Leanne Graham",
email: "[e-mail]",
set: true
},
{
id: 2,
name: "Ervin Howell",
email: "[e-mail]",
set: false
},
// ... list of items
{
id: 11,
name: "Nicholas DuBuque",
email: "[e-mail]",
set: false
}
];
// UserRowSelected Event handler
onRowSelect(event) {
this.selectedRows = event.selected;
}
// Get Selected button click handler
onClick() {
// It will console all the selected rows
this.selectedMode = false;
this.disableCheckboxes();
}
onDeleteConfirm(event) {
console.log("Delete Event In Console")
console.log(event);
if (window.confirm('Are you sure you want to delete?')) {
event.confirm.resolve();
} else {
event.confirm.reject();
}
}
onCreateConfirm(event) {
console.log("Create Event In Console")
console.log(event);
}
onSaveConfirm(event) {
console.log("Edit Event In Console")
console.log(event);
}
}

在这里完成工作堆栈闪电战

更新(根据下面的提问者评论)：

相关CSS：

::ng-deep table tr td:nth-of-type(1),
::ng-deep table tr th:nth-of-type(1)
{ padding:0 !important; display: block;height: 13px; position: relative;}
::ng-deep table tr td:nth-of-type(1) input,
::ng-deep table tr th:nth-of-type(1) input
{ margin:0 !important; position: absolute; top: 15px;}
::ng-deep table tr td:nth-of-type(2),
::ng-deep table tr th:nth-of-type(2)
{ padding: 0 0 0 20px !important;}