Как раскрасить разные строки в ngFor Angular 5
Я создаю таблицу, в которой несколько строк загружены из *ngFor:
<tr *ngFor = "let car of cars">
<td>{{car?.id}}</td>
<td>{{car?.date | date : "short"}}</td>
<div [ngSwitch] = "car?.state">
<td *ngSwitchCase=1 class = "col">Sold</td>
<td *ngSwitchCase=7 class = "col">Repaired</td>
<td *ngSwitchDefault class = "col">Out of stock</td>
</div>
</tr>
И я хочу, чтобы каждый ряд был окрашен в свой цвет, это будет зависеть от состояния машины. Я знаю, как это делать со статическим контентом, но не в том случае, если он поступает из базы данных, и мне нужно загрузить его с помощью директивы *ngFor.
Поскольку я использую bootstrap, я хотел бы использовать стиль класса .table-success для состояния 1, .table-info для состояния 7 и primary для состояния по умолчанию.
<tr class = "table-success">
Ответы 4
Напишите стили с вашими требованиями с возможными названиями состояний автомобиля.
возьмем. Если вы получите статус автомобиля доставлен.
затем написать
.delivered{
background: green,
color: black
}
<tr [ngClass] = "{{car.status}}" *ngFor = "let car of cars">
<td>{{car?.id}}</td>
<td>{{car?.date | date : "short"}}</td>
<div [ngSwitch] = "car?.state">
<td *ngSwitchCase=1 class = "col">Sold</td>
<td *ngSwitchCase=7 class = "col">Repaired</td>
<td *ngSwitchDefault class = "col">Out of stock</td>
</div>
</tr>
Вероятно, вы захотите использовать директиву ngClass:
[ngClass] = "{'table-success' : car.state == 1}"
Поскольку у вас есть несколько вариантов, и их может быть немного сложно читать, вы можете добавить метод в файл компонента .ts.
[ngClass] = "getClasses(value)"
И создайте метод getClasses, который возвращает правильный класс для элемента.
Но в конце концов, если у вас уже есть переключатель, почему бы вам просто не сделать это:
<td *ngSwitchCase = "1" class = ".table-success col">Sold</td>
<td *ngSwitchCase = "7" class = ".table-info col">Repaired</td>
<td *ngSwitchDefault class = "col">Out of stock</td>
добавьте классы к переключателю, который у вас уже есть :)
Во-первых, <div> внутри <tr> не будет работать, здесь вам подойдет <ng-container>. Это специальный тег, используемый только в компиляторе angular, который преобразуется в комментарий HTML.
Кроме того, вам не хватает некоторых двойных кавычек для вашего *ngSwitchCase.
Что касается классов, вы можете использовать привязку [class.class-name] или [ngClass], если считаете, что это более структурировано:
<tr *ngFor = "let car of cars" class = "table-primary"
[class.table-success] = "car.state === 1" [class.table-info] = "car.state === 7">
<td>{{car?.id}}</td>
<td>{{car?.date | date : "short"}}</td>
<ng-container [ngSwitch] = "car?.state">
<td *ngSwitchCase = "1" class = "col">Sold</td>
<td *ngSwitchCase = "7" class = "col">Repaired</td>
<td *ngSwitchDefault class = "col">Out of stock</td>
</ng-container>
</tr>
Вы можете использовать ngClass.
В строке таблицы:
<tr [ngClass] = "{'table-success': (car?.state=='1'), 'table-info': (car?.state=='7'), 'primary': (car?.state=='7' && car?.state=='1')}" *ngFor = "let car of cars">
Это именно то, что я искал. Большое спасибо!