Question

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

表格设置：

  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);
  });
}

Answer 1

我将自己定制。

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;
}

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

Answer 2

隐藏编辑和删除图标的非常有用的技巧（ngx-smart-table）将此添加到您的组件css

:host /deep/ ng2-smart-table table > tbody > tr.hide-action > td > ng2-st-tbody-edit-delete {
  display:none;
  visibility: hidden;
}

Answer 3

按照我的方法：首先，我创建了一个自定义操作组件：

[...]
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { ViewCell } from 'ng2-smart-table';


@Component({
  selector: 'ngx-custom-actions',
  template: `
  <div class="btn-group btn-group-sm" role="group">
  <button (click)="doEdit()"
          nbButton
          outline
          status="info"
          size="small"
          [disabled]="!isEditable"
          class="mr-2">
    Editar
  </button>
  <button (click)="doDelete()"
          nbButton
          outline
          status="danger"
          [disabled]="!isEditable"
          size="small">
    Excluir
  </button>
</div>
  `,
})
export class CustomActionsComponent implements ViewCell, OnInit {

  isEditable: boolean;

  @Input() value: string | number;
  @Input() rowData: any;

  @Output() edit: EventEmitter<any> = new EventEmitter();
  @Output() delete: EventEmitter<any> = new EventEmitter();

  ngOnInit() {
    this.isEditable = this.value === 'Draft';
  }

  doEdit() {
    this.edit.emit(this.rowData);
  }
  doDelete() {
    this.delete.emit(this.rowData);
  }

}

在模块上注册，然后在entryComponents上注册！

@NgModule({
  declarations: [FormsEngineListComponent, CustomActionsComponent],
  imports: [
    // others imports
    Ng2SmartTableModule,
  ],
  entryComponents: [
    CustomActionsComponent,
  ],
})
export class FormsEngineModule { }

在ng2-smart-table上使用您的配置

list.component.ts

settings = {
  actions: false,
  hideSubHeader: true,
  columns: {
    id: {
      title: 'ID',
      type: 'number',
    },
    actions: {
      title: 'Ações',
      type: 'custom',
      renderComponent: CustomActionsComponent,
      onComponentInitFunction(instance) {
        instance.edit.subscribe(row => {
          console.log('edit', row);
        });
        instance.delete.subscribe(row => {
          console.log('delete', row);
        });
      },
    }
  },
};

demoData = [
  {id: '122323', actions: 'Draft'},
  {id: '2342342', actions: 'Ready'},
];

ngOnInit() {
  this.source.load(this.demoData);
}

Answer 4

要显示和隐藏操作列，请使用以下代码。

1。隐藏操作列

将操作设置为 false ，如下所示在设置中

settings = {
  actions: false,
}

2。显示操作列

将操作设置为 true ，如下所示在设置中

settings = {
      actions: true,
    }

Answer 5

也许有点晚，但是在您的设置中设置“ actions：false”，然后，您可以使用变量进行动态

Angular 5 + ng2-smart-table：有条件地隐藏/禁用操作列

5 个答案: