使用 angular and/or bootstrap 更改特定行的颜色

Question

早上好，我有一个 table，我想根据条件更改特定行的背景颜色，我该怎么做？

我想绘制所有属性为 Prioridad= Urgente 的单元格，我正在使用 angular cli 7.3

我的代码html:

<div class="table table-responsive table-striped">
            <table class="table table-hover table-bordered table-sm">
              <caption>Lista de Pedidos</caption>
              <thead class="thead-dark">
                <tr>
                  <th class="text-center" scope="col">#</th>
                  <th class="text-center" scope="col">Linea</th>
                  <th class="text-center" scope="col">PartNumber</th>
                  <th class="text-center" scope="col">Estado</th>
                  <th class="text-center" scope="col">Prioridad</th>
                  <th class="text-center" scope="col">Feeder</th>
                  <th class="text-center" scope="col">Hora</th>
                  <th class="text-center" scope="col" 
    colspan="2">Acción</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor='let pedido of pedidos; let i = index' [ng- 
         class]="{'resaltado': pedido.prioridad == 'Urgente'}">
                  <td class="align-middle text-center"><strong>{{i + 1}} 
        </strong></td>
                  <td class="align-middle text-center">{{ pedido.linea 
       }}</td>
                  <td class="align-middle text-center">{{ pedido.part_number }}</td>
                  <td class="align-middle text-center">{{ pedido.estado }}</td>
                  <td class="align-middle text-center">{{ pedido.prioridad }}</td>
                  <td class="align-middle text-center">{{ pedido.feeder }}</td>
                  <td class="align-middle text-center">{{ pedido.created_at }}</td>
                  <td class="text-center"><button type="button" class="btn btn-success">Aceptar</button></td>
                </tr>
              </tbody>   
            </table> 
        </div>

[ng-class]="{'resaltado': pedido.prioridad == 'Urgente'}", 它对我不起作用

Answer 1

您需要将 [ng-class]="{'resaltado': pedido.prioridad == 'Urgente'}"> 更改为 [ngClass]="{'resaltado': pedido.prioridad == 'Urgente'}">

看到 ng-class 是针对 angularjs 和 Angular 2 的变化（angular 的新框架使用 [ngClass].

另一个技巧是使用 === 而不是 == 的严格比较。

使用 angular and/or bootstrap 更改特定行的颜色

Change the color of a specific row with angular and/or botstrap

bootstrap-4

angular