Цвет значка материала установлен красным, если логическое значение равно false - PullRequest
Новая
       6

Цвет значка материала установлен красным, если логическое значение равно false

0 голосов
/ 05 февраля 2019

Для моего приложения задач мне бы хотелось, чтобы удары вверх / вниз отображались зеленым / красным цветом в зависимости от того, завершена задача или нет.В старой версии приложения я мог использовать ngClass и устанавливать для значка другой класс css.

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;
}

Почему это не работает в этом сценарии?

Спасибо за любую помощь!

1 Ответ

0 голосов
/ 05 февраля 2019

Просто избавьтесь от . в именах классов в вашем [ngClass] синтаксисе:

Измените 

<mat-icon [ngClass]="todo.completed ? '.green' : '.red' ">thumb_up</mat-icon>

на 

<mat-icon [ngClass]="todo.completed ? 'green' : 'red' ">thumb_up</mat-icon>
...