我正在尝试根据特定条件将两个类分配给表行,但是将错误的类分配给了错误的tr。
我的list.component.html:
div class="country_box" *ngIf="cases">
<div class="container">
<input
type="text"
class="form-control-sm"
name="search"
[(ngModel)]="search"
autocomplete="off"
placeholder="Search by Country Name"
/>
</div>
<table>
<tr>
<th>
<h3><strong>Country Name: </strong></h3>
</th>
<th>
<h3><strong>Cases: </strong></h3>
</th>
<th>
<h3><strong>Deaths: </strong></h3>
</th>
<th>
<h3><strong>Recovered: </strong></h3>
</th>
</tr>
<tr
*ngFor="let country of cases[1].countries_stat | filter: search"
[ngClass]="setClass(country)"
>
<td>{{ country.country_name }}</td>
<td>{{ country.cases }}</td>
<td>{{ country.deaths }}</td>
<td>{{ country.total_recovered }}</td>
</tr>
</table>
</div>
我的list.component.ts:
setClass(stats) {
//console.log(stats.deaths);
let myClass = {
negative: stats.deaths > stats.total_recovered,
positive: stats.deaths < stats.total_recovered,
};
return myClass;
}
最后是我的list.component.css:
.positive {
background-color: red;
color: #fafafa;
}
.negative {
background-color: green;
color: #fafafa;
}
我将不胜感激,谢谢!
您setClass返回对象而不是类名。
您能否尝试返回下面的类名。
setClass(stats) {
return stats.deaths > stats.total_recovered ? 'negative' : 'positive' ;
}