有條件地將CSS樣式應用於Twitter-Bootstrap表的問題

Question

我有一張包含產品列表的表。 在表格下方，我有一個文本字段，在其中輸入了條形碼，如果找到條形碼，則應突出顯示表格中的匹配行。 我已經閱讀了許多類似的場景，據我所知，我正在盡我所能。 我可以在Google開發人員控制台中看到我輸入的條形碼與表中當前唯一的產品相匹配，但是由於某種原因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

錯誤，這看起來不錯，但讓我們對其進行深入了解。

因此，對於未應用CSS類的情況，您是否嘗試過檢查元素以查看是否將該類添加到tr ，或者樣式是否已被覆蓋？

Answer 2

您的課程不適用於td。 您需要在此處使用表的CSS更加具體。

.found td { background-color: green; }