javascript - json上的条件css(动态)bason
问题描述
我的table <div class="cellSubText secondary-text {{cssSubCell}}" >{{cellData[subId]}}</div>
-multi-sort-cell-default.component.html 中的表格使用 tableOptions 中的 cssClass 是cssSubCell: 'c-black fs-14px'
我们如何根据我的 tableOptions cssSubCell 构造条件 css
例如cssSubCell: 'c-black fs-14px'
,仅当 subId !== 'test' 时才有效
我在下面尝试过,但条件不起作用或无法识别,我的 CSS 条件结构和实现是否正确?
cssSubCell: 'c-black fs-14px : subId !== "test"
#this CSS 工作,但我希望它是条件
cssSubCell: 'c-black fs-14px'
#component A tableOptions
this.tableOptions = {
columns:[
{id:'name',name:'Deal Letter',subId:'dealType', subtitle:'Deal Type'},
{id:'annualRentCurrent',name:'Annual Rent (Current)', subId: 'annualRentProposed', subtitle:'Annual Rent (Proposed)'},
{id:'firmTermRemainingCurrent',name:'Firm Term Remaining (Current)', subId: 'proposedTerm', subtitle:'Firm Term Remaining(Proposed)'},
{id:'maxAvailableTerm',name:'Max Available Term (Current)' , subId:'proposedMaxAvailableTerm', subtitle: 'Max Available Term (Proposed)'},
{id:'cashContribution',name:'Cash Contribution'},
{id:'cashFlow',name:'Store Cash Flow'},
{id:'action', name: 'Actions', actions:[
{icon:'file_copy', name:'Copy', class:'primary-color' , },
{icon:'delete', name: 'Delete', class:'mat-error ml-7px'},
{icon:'forward', name: 'For Approval', class:'primary-color'}
]}
],
cssClass: {
cssCell:'',
cssSubCell: 'c-black fs-14px'
}
}
#表格截图
#table-multi-sort-cell-default.component.html
<div class="{{cssCell}}">{{cellData[id]}}</div>
<div class="cellSubText secondary-text {{cssSubCell}}" >{{cellData[subId]}}</div>
#table-multi-sort.component.html
<ng-container *ngFor="let column of table.columns" [matColumnDef]="column.id">
<mat-header-cell class="table-multi-sort-header" *matHeaderCellDef [mat-multi-sort-header]="column.id">
<div>{{column.name}}</div>
<div class="sub-text">{{getColumnSubtitle(column.id)}}</div>
</mat-header-cell>
<mat-cell *matCellDef="let row" (click)="editRow(row)">
<ng-container *ngIf="column.id !== 'action'; then col; else actionCol"></ng-container>
<ng-template #col>
<app-table-multi-sort-cell-default [cellData]="row" [id]="column.id" [subId]="getColumnSubId(column.id)" [cssCell]="cssClass.cssCell" [cssSubCell]="cssClass.cssSubCell" ></app-table-multi-sort-cell-default>
</ng-template>
<ng-template #actionCol>
<app-table-multi-sort-cell-action [rowData]="row" [actions]="getActions(column.id)" (actionClickEvent)="clickTableAction($event,row)"></app-table-multi-sort-cell-action>
</ng-template>
</mat-cell>
</ng-container>
解决方案
你需要使用ngClass
<div class="cellSubText secondary-text" [ngClass]="{'c-black fs-14px' : subId !=='dealType'}">
{{cellData[subId]}}
</div>
推荐阅读
- c# - AutoMapper 将字符串集合映射到另一个集合中的集合的属性
- java - 我想提取所有
- 下的元素文本
- 下的元素文本
- f# - 尝试在 f# 中编写一个简单的函数,要求用户在命令行中输入
- swiftui - 弹出到根视图时缺少目标
- php - 在 Laravel 中使用 CSS 类
- jmeter - 如何使用 Jmeter Post 请求在 json 正文中传递引用的数据
- azure - Azure Blob 存储覆盖重复文件
- apache-storm - Apache Storm 并行性如何工作?
- reactjs - 在 ReactJs 中引用未定义
- excel - 在excel中,以连字符“-”开头的单元格内容转换为文本