ng2智能表如何根據列值隱藏刪除圖標

Question

我已經集成了ng2智能表。

在操作列中，我顯示了編輯和刪除鏈接。

我想隱藏刪除和編輯鏈接，具體取決於列值。 如果狀態為活動狀態，則需要隱藏編輯和刪除鏈接。

以下是我的設置

    settings = {
selectMode: 'multi',
mode: 'external',
hideSubHeader:true,
editable:false,
pager : {
    display : true,
    perPage:20
},
actions: { add: false, edit: true, delete:true, position:'right'},
      edit: {
        editButtonContent: '<i class="fa fa-pencil"></i>'
        //mode: 'external'
      },
      delete: {
        deleteButtonContent: '<i class="fa fa-trash" aria-hidden="true"></i>',
        confirmDelete: true
      },
  columns: {
    id: {
      title: 'ID'
    },
    title: {
      title: 'Title'
    },
     status: {
      title: 'Status',
      type: "html",
      valuePrepareFunction: (value) => { 
        if(value == 'To be approved') {
          return '<span class="unapproved">'+value+'</span>'  
        } else {
          //actions.edit  = false;
          return '<span class="approved">'+value+'</span>'  
        }

      }

    }
  }
};

這是我用過的代碼

 <ng2-smart-table id="ng2_smart" [settings]="settings" [source]="data" (edit)="onEdit($event)" (delete)="onDelete($event, content)" (custom)="onCustom($event)" (userRowSelect)="selectedData($event)"></ng2-smart-table>

Answer 1

使用全局布爾變量將狀態列初始化為顯示/隱藏。 並在動作對象中使用它。 試試下面的代碼

  var isEditOrDelete=true; settings = { selectMode: 'multi', mode: 'external', hideSubHeader:true, editable:false, pager : { display : true, perPage:20 }, actions: { add: false, edit: isEditOrDelete , delete: isEditOrDelete, position:'right'}, edit: { editButtonContent: '<i class="fa fa- pencil"></i>' //mode: 'external' }, delete: { deleteButtonContent: '<i class="fa fa-trash" aria- hidden="true"></i>', confirmDelete: true }, columns: { id: { title: 'ID' }, title: { title: 'Title' }, ststus:{ title: 'Status', type: "html", valuePrepareFunction: (value) => { if(value == 'To be approved') { isEditOrDelete = false; return '<span class="unapproved">'+value+'</span>' } else { isEditOrDelete = true; return '<span class="approved">'+value+'</span>' } } } } };