Material 如果布尔值为假,图标设置为红色
Material icon set color red if boolean is false
对于我的待办事项应用程序,我希望有 green/red 颜色的重击 up/down,具体取决于待办事项是否已完成。在旧版本的应用程序中,我能够使用 ngClass 并为图标设置不同的 css class。
HTML:
<mat-card class="example-card" *ngFor="let todo of todoList">
<mat-card-header>
<div mat-card-avatar>
<mat-icon [ngClass]="todo.completed ? '.green' : '.red' ">thumb_up</mat-icon>
</div>
<mat-card-title>{{todo.taskName}}</mat-card-title>
<mat-card-subtitle>
<mat-icon style="font-size: 15px">calendar_today</mat-icon>
{{todo.dueDate | date: 'dd.MM.yyyy'}}</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<p>
{{todo.extraNote}}
</p>
</mat-card-content>
<mat-card-actions align="center">
<button mat-button>
<mat-icon>done</mat-icon>
</button>
<button mat-button>
<mat-icon>edit</mat-icon>
</button>
<button mat-button (click)="delete(todo.id)">
<mat-icon>delete</mat-icon>
</button>
</mat-card-actions>
</mat-card>
CSS:
.example-card {
max-width: 90%;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}
.red {
font-size: 30px;
color: red
}
.green {
font-size: 30px;
color: green;
}
为什么在这种情况下不起作用?
感谢您的帮助!
只需删除 [ngClass]
语法中 class 名称中的 .
:
改变
<mat-icon [ngClass]="todo.completed ? '.green' : '.red' ">thumb_up</mat-icon>
到
<mat-icon [ngClass]="todo.completed ? 'green' : 'red' ">thumb_up</mat-icon>
对于我的待办事项应用程序,我希望有 green/red 颜色的重击 up/down,具体取决于待办事项是否已完成。在旧版本的应用程序中,我能够使用 ngClass 并为图标设置不同的 css class。
HTML:
<mat-card class="example-card" *ngFor="let todo of todoList">
<mat-card-header>
<div mat-card-avatar>
<mat-icon [ngClass]="todo.completed ? '.green' : '.red' ">thumb_up</mat-icon>
</div>
<mat-card-title>{{todo.taskName}}</mat-card-title>
<mat-card-subtitle>
<mat-icon style="font-size: 15px">calendar_today</mat-icon>
{{todo.dueDate | date: 'dd.MM.yyyy'}}</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<p>
{{todo.extraNote}}
</p>
</mat-card-content>
<mat-card-actions align="center">
<button mat-button>
<mat-icon>done</mat-icon>
</button>
<button mat-button>
<mat-icon>edit</mat-icon>
</button>
<button mat-button (click)="delete(todo.id)">
<mat-icon>delete</mat-icon>
</button>
</mat-card-actions>
</mat-card>
CSS:
.example-card {
max-width: 90%;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}
.red {
font-size: 30px;
color: red
}
.green {
font-size: 30px;
color: green;
}
为什么在这种情况下不起作用?
感谢您的帮助!
只需删除 [ngClass]
语法中 class 名称中的 .
:
改变
<mat-icon [ngClass]="todo.completed ? '.green' : '.red' ">thumb_up</mat-icon>
到
<mat-icon [ngClass]="todo.completed ? 'green' : 'red' ">thumb_up</mat-icon>