Привязки классов в Angular не работают должным образом - PullRequest
Новая
       3

Привязки классов в Angular не работают должным образом

0 голосов
/ 06 апреля 2020

Я пытаюсь назначить два класса в строку таблицы на основе определенных c условий, но неправильные классы присваиваются неправильным 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;
}

Буду признателен за любую помощь, спасибо!

1 Ответ

0 голосов
/ 06 апреля 2020

Вы setClass возвращаете объект вместо имени класса.

Вы можете попытаться вернуть имя класса, как показано ниже 1. 

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