угловой, как по-разному стилизовать самое низкое значение в таблице - PullRequest
Новая
       14

угловой, как по-разному стилизовать самое низкое значение в таблице

0 голосов
/ 04 июля 2019

У меня есть таблица в Angular, которая показывает список предметов с ценами. цены отсортированы из БД, поэтому всегда самая низкая цена будет первой. Я хочу по-разному (зеленый цвет) первой строки столбца суммы ставки (по умолчанию все остальные строки красного цвета, поэтому мне просто нужно стилизовать первый). Другой вопрос заключается в том, что мне нужно отобразить разницу между самой низкой ставкой и другими ставками (добавлю картинку, чтобы сделать это более понятным) ссылка на стек: https://stackblitz.com/edit/angular-lxngez желаемый результат: https://imgur.com/a/TpJwHuW

Я попытался добавить ngClass по-другому для первого индекса ставки. ВсегоЦена, но это не сработало: 

<td [ngClass]="{'green-text': bid.TotalPrice[0]}">{{ bid.TotalPrice | currency }}</td>

Я добавил картинку для желаемого результата (2 вещи, которые мне нужны, чтобы добиться другого стиля и разницы между самой низкой ценой и другими ценами.

Ответы [ 5 ]

1 голос
/ 04 июля 2019

Давайте попробуем это (чисто угловая реализация):

HTML 

    <td style="color: red" class="input-text"
        [ngClass]="{ 'price-input-text': 'i == 0' }"
        [ngStyle]="{color: i == 0 ? 'green' : 'red'}">
      {{ bid.TotalPrice | currency }}
      <small *ngIf="i == 0">Lowest price</small>
    </td>
1 голос
/ 04 июля 2019

Для цвета, вы можете сделать это чисто в CSS.Вы можете добавить класс .price к ячейке таблицы и добавить правило, которое выбирает первую строку таблицы и переопределяет цвет ячейки цены

В шаблоне: 

<td style="color: red" class="price input-text">{{ bid.TotalPrice | currency }}</td>

В css: 

#tableSortExample tbody tr:first-of-type .price {
   color: green!important;
}

Что касается цены, вы можете просто добавить условный интервал в случае самой низкой цены и в других случаях 

<td style="color: red" class="price input-text">{{ bid.TotalPrice | currency }}
    <span *ngIf="i === 0"> Lowest price.</span>
    <span *ngIf="i > 0"> {{bid.TotalPrice - auctionBidsData.auctionBids[0].TotalPrice | currency}}</span>
</td>
0 голосов
/ 04 июля 2019

Найдите минимальное значение, используя Reduce 

this.minPrice=this.auctionBidsData.auctionBids.reduce(
        (min,b)=>min<b.TotalPrice?min:b.TotalPrice,
           this.auctionBidsData.auctionBids[0].TotalPrice)

и используйте в td 

 [style.color]="{bid.totalPrice==minPrice?'green':null"}
0 голосов
/ 04 июля 2019

Вы можете сделать это, как показано ниже, используя [ngClass].

HTML 

<tr *ngFor="let bid of auctionBidsData.auctionBids; let i = index" class="pointer-hover"
    (click)="goToLiveAuction(auction.UID)">
  ...
  <td style="color: red" class="input-text" 
      [ngClass]="{ 'lowest': i === 0 }">{{ bid.TotalPrice | currency }}</td>
  ...
</tr>

CSS 

.lowest {
  color: green !important;
  font-weight: bold;
}

Демонстрация StackBlitz

0 голосов
/ 04 июля 2019

Используйте ngClass следующим образом: 

<td [ngClass]="{ low: i == 0, high: i > 1, other: condition(item, i) }">ABC</td>

Он добавит класс low для первого индекса, класс high для всего, что находится выше второй строки, и класс other для тех, у кого условие оценивается как true.

Просто используйте эти классы для стилизации соответственно. пример

...