我刚开始使用一种基本方法,所以我想有条件地突出显示行颜色,它不会抛出任何错误,但不会将背景颜色应用于该行。我有 5 行有 riskINdex
H
,知道下面代码中的错误实现是什么吗?
app.component.html
<div>
<mat-table>
<ng-container matColumnDef="eventType">
<mat-header-cell *matHeaderCellDef> Event Type </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.eventType}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selectedRow(row)" [ngClass]="{ 'high': row.riskIndex === 'High'}"></mat-row>
</mat-table>
</div>
组件.css
.high {
background-color: red;
}
最佳答案
假设,您想要通过某些模型属性突出显示mat-row
。假设状态 == 已批准时突出显示。
<tr mat-row *matRowDef="let row; columns: displayedColumns;let entry"[ngClass]="{ 'highlight': entry.status == 'Approved' }"></tr>
在上面的代码行中,
highlight
是在 .css 文件中定义的 css
类。
.highlight{
background: #42A948; /* green */
}
上述.css文件包含在组件中如下。
@Component({
styleUrls: ['./expense.component.css'],
})
关于html - 如何有条件地突出显示 Angular Material 表行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47661890/