Question

我目前正在使用角度6，我必须表格的行根据行的内容而改变。

所以我在ngif中使用条件语句。我想知道是否有一种方法可以不做2个Ngif语句？

Answer 1

您不需要angular或javascript（仅CSS），以下使用:nth-of-type(even)选择器。

仅会显示满足ngIf条件的tr，并且此样式将应用于第二行，而不考虑未显示的行数。

table {
  display: block;
  width: 100%;
}

tr:nth-of-type(even) {
background: yellow; 
color: blue;
}

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
    <tr>
    <td>David</td>
    <td>Griffith</td> 
    <td>50</td>
  </tr>
</table>

Answer 2

我发现了如何使用ngStyle：

[ngStyle]
  <li  [ngStyle]= "{ 'backgroundColor' : (film.duree=='2 heures') ? 'blue' : 'red'  }">  {{ film.nom}}-   {{ film.duree}}-  {{ film.categorie}}</li>

Answer 3

除了直接标记样式外，还提供了一个谓词，您可以使用Angular属性绑定轻松地切换包含样式信息的类：

<li [class.my-class]="condition">data</li>

根据条件更改角度6行颜色

3 个答案: