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

【问题标题】：Issues Applying css styles conditionally to a twitter-bootstrap table有条件地将 css 样式应用于 twitter-bootstrap 表的问题
【发布时间】：2017-11-07 11:26:14
【问题描述】：

我有一个包含产品列表的表格。在表格下方，我有一个输入条形码的文本字段，如果找到条形码，则应突出显示表格中的匹配行。我已经阅读了许多类似的场景，据我所知，我正在做我应该做的一切。我可以在谷歌开发控制台中看到我输入的条形码与我表中当前唯一的产品匹配但是由于某种原因没有应用 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>

//设置spotCheckBarcode的我的ts组件函数

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

【问题讨论】：

你试过了吗：.found td { background-color: green; }
你能创建一个快速的 plunker 以便更容易弄清楚发生了什么。
@techLove 做到了！！！请添加它作为答案，为什么我必须将它应用于列和行？

标签： css html twitter-bootstrap angular

【解决方案1】：

呃，看起来不错，但让我们把它分开。

那么对于未应用的 css 类，您是否尝试过检查元素以查看该类是否已添加到 tr 并且样式是否被覆盖？

【讨论】：

感谢您提供非常详细的回答：似乎该类就在那里，在顶部我可以看到表 tbody tr.found。但是，当我选择 tr.found 时，我在它下面的 css 中的任何地方都看不到找到的类。这是否意味着它不会被连接？我猜它是覆盖它的引导程序？

【解决方案2】：

您的课程不适用于 td。您需要在这里更具体地使用 css for table。

.found td { background-color: green; }

【讨论】：