在mat表上的Angular材料2复选框隐藏在悬停上以获取大型记录

Question

我有一个包含可选行的mat-table，其中包含300（+）条记录。在this教程之后，我创建了这个表。

包含此表的组件是子组件。在渲染表格时，当我滚动并将鼠标悬停在复选框上时，它们会隐藏并显示这样的内容。

不确定这里发生了什么。我试过一个普通的组件，它不是一个子组件，而且表的工作正常。任何人都可以建议一个解决方法。提前谢谢。

编辑：此组件是标签组的一部分。

app.component.ts

displayColumns = ['select', 'position', 'name', 'weight', 'symbol', 'icon'];
dataSources = new MatTableDataSource<Element>(ELEMENT_DATA);
selections = new SelectionModel<Element>(true, []);

/** Whether the number of selected elements matches the total number of rows. */
isAllSelected() {
 const numSelected = this.selections.selected.length;
 const numRows = this.dataSources.data.length;
 return numSelected === numRows;
}

/** Selects all rows if they are not all selected; otherwise clear selection. */
masterToggles() {
  this.isAllSelected() ?
  this.selections.clear() :
  this.dataSources.data.forEach(row => this.selections.select(row));
}

app.component.html

<!-- Checkbox Column -->
<ng-container matColumnDef="select">
  <mat-header-cell *matHeaderCellDef>
    <mat-checkbox (change)="$event ? masterToggles() : null"
                  [checked]="selections.hasValue() && isAllSelected()"
                  [indeterminate]="selections.hasValue() && !isAllSelected()">
    </mat-checkbox>
  </mat-header-cell>
  <mat-cell *matCellDef="let row">
    <mat-checkbox (click)="$event.stopPropagation()"
                  (change)="$event ? selections.toggle(row) : null"
                  [checked]="selections.isSelected(row)">
    </mat-checkbox>
  </mat-cell>
</ng-container>

<!-- Position Column -->
<ng-container matColumnDef="position">
  <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
</ng-container>

<!-- Name Column -->
<ng-container matColumnDef="name">
  <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
</ng-container>

<!-- Weight Column -->
<ng-container matColumnDef="weight">
  <mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
</ng-container>

<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
  <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
</ng-container>

<!--icon-->
<ng-container matColumnDef="icon">
  <mat-header-cell *matHeaderCellDef> ICON </mat-header-cell>
  <mat-cell *matCellDef="let element">
    <mat-icon matTooltip="Some Tootip Text">info
    </mat-icon>
  </mat-cell>
</ng-container>

<mat-header-row *matHeaderRowDef="displayColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayColumns;"
         (click)="selections.toggle(row)">
</mat-row>

解决方法：

我没有使用Angular Material的mat-checkbox，而是使用了基本的HTML元素input type="checkbox"，这解决了我的问题。

我认为问题可能是由于某些重要的css覆盖和使用HTML输入引起的，问题得到了解决。