Angular中的类绑定无法正常工作

Question

我正在尝试根据特定条件将两个类分配给表行，但是将错误的类分配给了错误的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;
}

我将不胜感激，谢谢！

Answer 1

您setClass返回对象而不是类名。

您能否尝试返回下面的类名。

setClass(stats) {
    return stats.deaths > stats.total_recovered ? 'negative' : 'positive' ;
}