問題將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，並且樣式可能被覆蓋？