Как нарисовать разные строки в ngFor Angular 5 - PullRequest
Новая
       23

Как нарисовать разные строки в ngFor Angular 5

0 голосов
/ 02 мая 2018

Я создаю таблицу, в которую загружено несколько строк из *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.

Поскольку я использую начальную загрузку, я хотел бы использовать стиль класса .table-success для состояния 1, .table-info для состояния 7 и primary для значения по умолчанию. 

<tr class="table-success">

Ответы [ 4 ]

0 голосов
/ 02 мая 2018

Вы можете использовать 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">
0 голосов
/ 02 мая 2018

Возможно, вы хотите использовать директиву 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>

добавьте классы к коммутатору, который у вас уже был:

0 голосов
/ 02 мая 2018

Во-первых, <div> внутри <tr> не будет работать, <ng-container> подойдет вам здесь. Это специальный тег, используемый только в угловом компиляторе, который преобразуется в комментарий 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>
0 голосов
/ 02 мая 2018

Напишите стили с вашим требованием с возможными названиями состояния автомобиля.

давайте возьмем. Если вы получили статус автомобиля доставлено.

затем напишите 

.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>
...