垫单元内的 Angular 2 垫复选框在检查时损坏

Question

有人可以帮我解决这个问题吗？

这是我的代码：

  <ng-container matColumnDef="checked">
    <mat-header-cell *matHeaderCellDef> </mat-header-cell>
    <mat-cell *matCellDef="let element" fxLayout="row" fxLayoutAlign="center center">
      <mat-checkbox [(ngModel)]="element.checked"></mat-checkbox>
    </mat-cell>
  </ng-container>

我在 Inspect 上寻找解决方案，并意识到当我取消选中位置时，检查再次正常工作。

谢谢！

Answer 1

似乎问题来自“溢出”属性的默认值。 尝试将其设置为未设置

<ng-container matColumnDef="checked">
  <mat-header-cell *matHeaderCellDef> </mat-header-cell>
  <mat-cell *matCellDef="let element" style="overflow: unset;">
    <mat-checkbox [(ngModel)]="element.checked"></mat-checkbox>
  </mat-cell>
</ng-container>

Answer 2

只需固定复选框位置即可。 这应该可以解决问题。

<mat-checkbox [(ngModel)]="element.checked" class="fixed"></mat-checkbox>

.fixed {
    position: fixed;
}

Answer 3

这是一个简单的 CSS 问题

我在@Angular/material@5.0.2 上解决了这个问题

mat-cell.mat-cell, mat-header-cell.mat-header-cell {
    overflow: visible;
}

记得把这个样式放在你的styles.css/styles.scss中或者处理组件封装，否则可能不行。