Angular 5 + ng2-smart-table:有条件地隐藏/禁用动作列 [英] Angular 5 + ng2-smart-table: Hide/disable actions column conditionally

问题描述

我有一个由ng2-smart-table构建的表，该表中的数据具有两个状态，分别为Draft和Ready.当data.status = 'Draft'时，可以出于CRUD的目的显示操作列，但是随后状态更改为data.status = 'Ready'时，我想禁用操作列.如何有条件地做到这一点?

I have a table built by ng2-smart-table, data in the table has two states as Draft and Ready. When data.status = 'Draft', it's possible to show actions column for CRUD purpose, but then the state changes to data.status = 'Ready', I want to disabled the actions column. How to do this conditionally?

表格设置:

  tableSettings = {
    add: {
      addButtonContent: '<i class="fas fa-plus fa-fw"></i>',
      createButtonContent: '<i class="fas fa-plus fa-fw"></i>',
      cancelButtonContent: '<i class="fas fa-times fa-fw"></i>',
      confirmCreate: true
    },
    edit: {
      editButtonContent: '<i class="fas fa-pencil-alt fa-fw"></i>',
      saveButtonContent: '<i class="fas fa-check fa-fw"></i>',
      cancelButtonContent: '<i class="fas fa-times fa-fw"></i>',
      confirmSave: true
    },
    delete: {
      deleteButtonContent: '<i class="far fa-trash-alt fa-fw"></i>',
      confirmDelete: true
    },

    columns: {
      title: {
        title: 'Title',
        type: 'text',
        filter: false,
      },
      description: {
        title: 'description',
        type: 'text',
        filter: false,
      }
    }
  };

ngOnInit() {
  this.apiService.getData.subscribe((res: any) => {
    this.data = res;
    console.log(this.data.status);
  });
}

推荐答案

我将自己进行自定义.

settings = {
    columns: {
        name: {
            title: 'Name',
            filter: true
        }
    },
    mode: 'external',
    actions: {
        delete: false,
        add: false,
        position: 'right'
    },
    rowClassFunction: (row) => {
        var curUserId = localStorage.getItem('user_id');
        if(row.data.createdBy == parseInt(curUserId)){
            return '';
        } else {
            return 'hide-action';
        }
    },
    edit: {
        editButtonContent: '<i class="ti-pencil text-info m-r-10"></i>'
    }
};
source = new LocalDataSource([{name:'Jai', createdBy:12}, {name:'Jack', createdBy:63}])

添加您的CSS文件

.hide-action td.ng2-smart-actions a {
    display: none;
}

我的要求是使用编辑授权用户.

My requirement is use edit authorized user.

这篇关于Angular 5 + ng2-smart-table:有条件地隐藏/禁用动作列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！