html - How to set multiple css class into bs-sortable?

Question

Anyone know how to set multiple css class in bs-sortable? This is my bs-sortable

<bs-sortable
  [(ngModel)]="sortableRowData"
  fieldName="name"
  itemClass="sortable-item"
  itemActiveClass="sortable-item-active"
  placeholderItem="Drag here"
  placeholderClass="placeholderStyle"
  wrapperClass="sortable-wrapper"
></bs-sortable>

This is my sortableRowData

sortableRowData= [
  {
     id: 1,
     name: 'Apple',
     type: 1
  },
  {
     id: 2,
     name: 'Orange',
     type: 2
  },
  {
     id: 3,
     name: 'Mango',
     type: 1
  }
];

This is my sortable-item class

.sortable-item {
padding: 6px 12px;
margin-bottom: 4px;
font-size: 14px;
line-height: 1.4em;
text-align: center;
cursor: grab;
border: 1px solid transparent;
border-radius: 4px;
border-color: #ee2121;
}

Currently, I only can set one css class for all row of my data. Anyway to set multiple class based on the type of my data? For example, type: 1 will link to css class 1, type: 2 will link to css class 2. Then I will have multiple design within my <bs-sortable>.

Answer 1

等待大神答复