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

【问题标题】：Angular5 use Hostlistener and directive to highlight selected rowAngular5 使用 Hostlistener 和指令来突出显示选定的行
【发布时间】：2018-09-12 19:52:01
【问题描述】：

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

我的 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 的新手，我很挣扎。

【问题讨论】：

你只尝试过'.checked'吗？
@Powkachu 我试过 .checked，不幸的是没用。
我刚刚复制了您的代码进行测试，发现您的输入复选框中有一个额外的'"'：appHighlightOnCheck"。我不知道它是否会导致问题，但无论如何你都可以删除它。
如果你真的想使用指令而不是像下面的答案那样继续，你可以添加一个 HostListener。例如，@HostListener('mouseleave') onMouseLeave() 你可以检查它是否被选中。因为 onInit 只被调用一次。要检查的正确属性是 .checked。
感谢@Powkachu，我设法使用您解释的方法实现了该功能。下面的答案似乎有点不正确，尽管它似乎是最有效的方法。

标签： angular event-handling onclicklistener angular5 angular-directive

【解决方案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>

【讨论】：

谢谢，[class. active]="level.check?true:null" 在 class 和 active 之间不应有空格，否则会引发错误。此外，这对我来说似乎是正确的，但它仍然没有将类添加到 <tr>