问题将css样式有条件地应用于twitter-bootstrap表

Question

我有一个包含产品列表的表。在表格下方，我有一个输入条形码的文本字段，如果找到条形码，表格中的匹配行应该高亮显示。我已经阅读了许多类似的场景，并且据我所知，我正在做所有事情。我可以在谷歌开发控制台看到，我输入的条码匹配目前唯一的产品在我的表中，但由于某种原因，CSS没有得到应用...任何想法我在这里做错了吗？/我该怎么去关于修复它？

我的CSS：

.found { 
    background-color: green; 
} 

我的HTML表和输入字段：

<table class="table table-striped"> 
    <thead> 
     <tr> 
     <th>Description</th> 
     <th>Price</th>       
     <th>Qty</th> 
     <th>Barcode</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr *ngFor="let item of ticket.items" [class.found]="item.Barcode === spotCheckBarcode"> 
      <td>{{item?.ProductDetail_Name}}</td> 
      <td>{{item?.Amount}}</td> 
      <td>{{item?.Qty}}</td> 
      <td>{{item?.Barcode}}</td> 
      </tr> 
     </tbody> 
    </table> 

    <form role="form" [formGroup]="spotCheckForm" (ngSubmit)="spotCheck(spotCheckForm.value.itemBarcode)"> 
     <input class="form-control" type="tel" placeholder="Enter item barcode" [formControl]="spotCheckForm.controls['itemBarcode']"> 
     <button class="btn btn-block" [disabled]="!spotCheckForm.controls['itemBarcode'].valid && busy"><span class="glyphicon glyphicon-search"></span> Search</button> 
    </form> 

//我的TS组件功能，设置spotCheckBarcode

spotCheck(itemBarcode: number) {     
    let found: boolean = false;  
    for (var i: number = 0; i < this.ticket.items.length; i++) {   
     if (itemBarcode === this.ticket.items[i].Barcode) { 
      console.log('found!'); 
      found = true;    
      this.spotCheckBarcode = itemBarcode;     
     }  
    }  
    if (found == false) { 
     console.log(`found in if statement: ${found}`); 
     this.showError("Item not found on ticket"); 
    }   
} 

Answer 1

类不会应用到TD。你需要在这里使用css来更具体的表格。

.found td { background-color: green; } 

Answer 2

误入歧途，期待权，但让我们分开。

因此，对于没有被应用的css类，您是否尝试检查该元素以查看该类是否被添加到tr，并且样式可能被覆盖？