角度材质：鼠标悬停在表格行上时显示复选框

Question

我有一个 Angular Material 表，第一列上有一个复选框。我只想在鼠标悬停在表格行上时显示复选框。

https://stackblitz.com/angular/pabvkrmvbab?file=app%2Ftable-selection-example.css

我可以使用 css 更改悬停时的行颜色，但不确定如何使用类似的解决方案来显示复选框

.mat-row:hover {
    background-color: red;
}

Answer 1

使用 CSS 轻松完成。

.mat-row:hover {
  background-color: red;
}
.mat-row mat-checkbox {
  display: none;
}
.mat-row:hover mat-checkbox {
 display: block;
}

Answer 2

您可以按以下方式进行。

添加新的boolean所谓的财产show来ELEMENT_DATA。

  addShowCheckboxProperty() {
    ELEMENT_DATA.map((data: any) => {
      data.show = false
    });
  }

使用opacity属性 onmat-checkbox显示/隐藏复选框，如下所示。

<td mat-cell *matCellDef="let row">
  <mat-checkbox [style.opacity]="row.show || selection.isSelected(row) ? 100 : 0"
                (click)="$event.stopPropagation()"
                (change)="$event ? selection.toggle(row) : null"
                [checked]="selection.isSelected(row)"
                [aria-label]="checkboxLabel(row)">
  </mat-checkbox>
</td>

处理mouseover和mouseleave事件tr如下。

HTML

  <tr mat-row *matRowDef="let row; columns: displayedColumns;"
      (click)="selection.toggle(row)" 
      (mouseover)="handleMouseOver(row)" 
      (mouseleave)="handleMouseLeave(row)">
  </tr>

TS

  handleMouseOver(row) {
    const position = row.position;
    ELEMENT_DATA.map((data: any) => {
      if (data.position === position) {
        data.show = true;
      }
    });
  }

  handleMouseLeave(row) {
    const position = row.position;
    ELEMENT_DATA.map((data: any) => {
      if (data.position === position) {
        data.show = false;
      }
    });
  }

当你展示你的时候checkbox，mouseover我认为不需要checkbox在表格标题行上全选。 找到工作StackBlitz。