Angular & ng2-smart-table: 多选模式复选框禁用

Question

我正在使用 ng2-smart-table 来显示一些数据，我已将 selectMode 设置为 'multi' 以便在左侧显示复选框。在数据中，我有一个对象数组，它带有一个属性 "set" ，它是一个布尔值，可以是真或假，如果集合属性是，我如何禁用复选框真的？有办法吗？

我已经尝试制作一个新的 renderComponent 等，但后来我失去了 selectAll 功能加上 renderComponent selectRow 的工作方式不同。

这里是 link：https://stackblitz.com/edit/angular-ndmxxg

Answer 1

我在顶部放了一个按钮，初始化为true，当你按下它时，它会禁用所有的复选框；

注意：我已将此设置为单击按钮，以便您看到它的实际效果；如果您想在从父项或 by-default 获取布尔变量后执行此操作，则必须在 ngAfterViewInit() 中执行此操作...因为我们必须等待 ng2-smart-table 准备就绪；我也在我的 stackblitz 中对此发表了评论；

相关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: "Sincere@april.biz",
      set: true
    },
    {
      id: 2,
      name: "Ervin Howell",
      email: "Shanna@melissa.tv",
      set: false
    },
    // ... list of items
    {
      id: 11,
      name: "Nicholas DuBuque",
      email: "Rey.Padberg@rosamond.biz",
      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);
  }
}

完成working stackblitz here

Update (in light of questioner's comment below):

Angular & ng2-smart-table: 多选模式复选框禁用

Angular & ng2-smart-table: Multi selectmode checkbox disable

css

typescript

ng2-smart-table

angular

nebular