用CSS类突出显示多个表行

当用户基于 this example . 每次单击行时,console.log都会正确输出,这些行永远不会像我期望的那样改变颜色。我错过了什么?

我的HTML

<table datatable [dtOptions]="dtOptionsComp" [dtTrigger]="dtTriggerComp" class="row-border hover">
    <thead><tr><th>ID</th><th>Name</th></tr></thead>
    <tbody>
  <tr *ngFor="let d of companylist" (click)="selectCompany($event, d)" [class.highlighted]="d.highlighted">
    <td>{{d.id}}</td><td>{{d.name}}</td>
  </tr></tbody>
</table>

我的组件

  public selectCompany(event: any, item: any) {
    this.selectedCompanyList.push(item.id);
    console.log(this.selectedCompanyList+" whee");
    item.highlighted=true;
  }

我的CSS

.table tr.highlighted td {
    background-color:#123456 !important;
    color: white;
  }