Угловой материал: показывать флажок при наведении мыши на строку таблицы

Question

У меня есть таблица угловых материалов с флажком в первом столбце. Я хочу показывать флажок только тогда, когда мышь находится над строкой таблицы.

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

Я могу использовать css для изменения цвета строки при наведении, но не уверен, как использовать подобное решение для отображения флажка

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

Answer 1

Вы можете сделать это следующим образом.

Добавить новое свойство boolean с именем show в ELEMENT_DATA.

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

Используйте свойство opacity в mat-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 .

Answer 2

Легко делается с помощью CSS.

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

Answer 3

Вы можете использовать ngIf для проверки переменной, а с помощью mouseenter вы можете установить ту же самую переменную на true, чтобы иметь возможность скрыть, просто установите ту же самую переменную на false с mouseleave.

А такие вещи:

HTML

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" (mouseenter)="isHover=true" 
(mouseleave)="isHover=false">

  <!-- Checkbox Column -->
  <ng-container matColumnDef="select">
    <th mat-header-cell *matHeaderCellDef>
      <mat-checkbox *ngIf="isHover" (change)="$event ? masterToggle() : null"
                    [checked]="selection.hasValue() && isAllSelected()"
                    [indeterminate]="selection.hasValue() && !isAllSelected()"
                    [aria-label]="checkboxLabel()">
      </mat-checkbox>
    </th>
    <td mat-cell *matCellDef="let row">
      <mat-checkbox *ngIf="isHover" (click)="$event.stopPropagation()"
                    (change)="$event ? selection.toggle(row) : null"
                    [checked]="selection.isSelected(row)"
                    [aria-label]="checkboxLabel(row)">
      </mat-checkbox>
    </td>
  </ng-container>

... 

</table>

Componet

isHover: boolean = false;

В этом случае флажки появляются, но вы можете добавить CSS с переходом, чтобы иметь плавный эффект или в зависимости от того, что вам нужно.