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; }

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

2 个答案: