如何在智能表格中显示带有颜色的启用/禁用

Question

我想根据 API 中的布尔值在我的状态列中显示启用/禁用，我是否必须制作一个单独的组件，或者我可以使用智能表来完成

export let settings = {
columns: {
FirstName: {
title: 'First Name',
filter: true
},
LastName: {
title: 'Last Name',
filter: true
},
Title: {
title: 'Title',
filter: true
},
No_longer_with_company__c: {
title: 'Status',
}
},
edit: {
editButtonContent: '<i class="ti-pencil text-info m-r-10"></i>',
saveButtonContent: '<i class="ti-save text-success m-r-10"></i>',
cancelButtonContent: '<i class="ti-close text-danger"></i>'
},
delete: {
deleteButtonContent: '<i class="ti-trash text-danger m-r-10"></i>',
saveButtonContent: '<i class="ti-save text-success m-r-10"></i>',
cancelButtonContent: '<i class="ti-close text-danger"></i>'
}
};

<div class="card">
<div class="card-body">
<h4 class="card-title">Filterable Table</h4>
<h6 class="card-subtitle">Smart data table library with sorting, filtering, pagination & add/edit/delete
functions.</h6>
<div class="table table-responsive smart-table">
<ng2-smart-table [settings]="settings" [source]="source" class=""></ng2-smart-table>
</div>
</div>
</div>

Answer 1

在智能桌上使用 [ngClass]。这将允许您运行条件语句并根据条件选择要应用的 CSS 类或 id。

例如：

<div class="table table-responsive smart-table" [ngClass]="{'first': true, 'second': true, 'third': false}">
<ng2-smart-table [settings]="settings" [source]="source" ></ng2-smart-table>
</div>

在此处查看更多信息： https://angular.io/api/common/NgClass