Angular5使用Hostlistener和指令突出显示选定的行

Question

使用Angular 5/2，我创建了一个表，该表从我的TS文件中称为“级别”的数组中提取值。

我的HTML：

<table class="table table-bordered table-condensed table-hover">
  <thead>
    <tr>
      <th class="text-center">
        <input type="checkbox" name="all" />
      </th>
      <th>Level</th>
      <th>Time</th>
      <th>Hourly Rate</th> 
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let level of levels ; let i = index">
      <td class="text-center">
         <input type="checkbox" 
          value="{{level.id}}"
          appHighlightOnCheck"/>
      </td>
      <td class="text-center">{{ level }}</td>
      <td>
         <input
         type="text"
         class="form-control">
      </td>
      <td>
         <input
         type="text"
         class="form-control">
       </td>
    </tr>
  </tbody>
</table>

当选中特定行的复选框时，我希望该行将类active ，因此将其突出显示。

指示：

import { Directive, ElementRef, OnInit, Renderer2, HostListener } from "@angular/core";

@Directive({
    selector: '[appHighlightOnCheck]'
})
export class HighlightOnCheck implements OnInit{
    constructor(private renderer: Renderer2, private elementRef: ElementRef){}

    ngOnInit(){console.log(this.elementRef.nativeElement.parentNode.parentNode);

        if(this.elementRef.nativeElement.isChecked){
            this.renderer.addClass(this.elementRef.nativeElement.parentNode.parentNode, 'active');  
        }
    }
}

isChecked似乎不是正确的方法。 我试图实现其他人的答案，但是，对于Angular 5来说，我很挣扎。

Answer 1

这可以在没有指令的情况下完成。 看看这是否有帮助：

<tbody> <tr *ngFor="let level of levels ; let i = index" [class. active]="level.check?true:null"> <td class="text-center"> <input type="checkbox" value="{{level.id}}" (change)="level.check = $event.target.checked"/> </td> <td class="text-center">{{ level }}</td> <td> <input type="text" class="form-control"> </td> <td> <input type="text" class="form-control"> </td> </tr> </tbody>