Question

我需要根据悬停在另一行上来有条件地为某些表行着色。所以我认为用css：hover类是不可能的。

如果我的表包含20行，一切正常。如果有超过100行，则着色会挂起。

我需要为当前悬停的行（这可以使用纯css）和另一行（基于当前行属性）着色。

diagnosis.component.ts

...

@Component({
  selector: 'xxx',
  templateUrl: './diagnosis.component.html',
  styleUrls: ['./diagnosis.component.scss'],
  animations: [routerTransition()],
  host: {'[@routerTransition]': ''}
})
export class DiagnosisComponent {

  private currentRow: any;
  private conjunctionRow: any;

  private tableData: TableData;

  ...

  onRowMouseEnter(row: any) {
    if (row.state === 1 || row.state === 2) {
      this.currentRow = row;
      this.conjunctionRow = this.tableData.content.find(cRow => cRow.state != row.state && cRow.sequenceNumber === row.sequenceNumber && cRow.eventCode === row.eventCode);
    }
  }

  onRowMouseLeave() {
    this.currentRow = null;
    this.conjunctionRow = null;
  }

}

diagnosis.component.html

<table class="table table-striped table-hover table-sm">
<thead>
  ...
</thead>
<tbody>
<tr *ngFor="let row of tableData?.content" (click)="onEventClicked(row)" (mouseenter)="onRowMouseEnter(row)" (mouseleave)="onRowMouseLeave()" [ngClass]="{'leave-event': (row === currentRow || row === conjunctionRow) && row.state === 2, 'rise-event': (row === currentRow || row === conjunctionRow) && row.state === 1}">
  ...
</tr>
</tbody>

我将当前悬停的行保存在onRowMouseEnter(row)中，并在ngClass条件下处理此变量。

但是，在函数体中没有任何代码的情况下使用Angular2 (mouseenter)将永远持续，另一方面使用onmouseenter="console.log('test');"运行平稳。

因此使用angular2函数可以绊倒。

我知道tableData.contant.find()可能是一个问题但是评论这一行并不能消除绊脚石。

任何想法如何解决这个问题？

AngularJS 2行悬停样式

0 个答案: