墊單元內的 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中或者處理組件封裝，否則可能不行。