css - 在 mat-table 中只选择一行，如果选择其他行，则取消选择第一行

Question

我想实现只有一行选择的表格。现在我有多项选择。

我尝试了 coupe 方式来做到这一点，但我坚持使用这个方式。

图形示例:

component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';
import { UsersReadRepository } from '../../../../core/services';
import { MatTableDataSource } from '@angular/material';
import { User } from 'domain-models';
import { Observable, Subscription } from 'rxjs';
import { Subscribable } from 'rxjs/Observable';
import { SelectionModel } from '@angular/cdk/collections';

@Component({
    selector: 'choose-supervisior',
    templateUrl: './chooseSupervisior.component.html',
    styleUrls: ['./chooseSupervisior.component.scss']
})

export class ChooseSupervisiorComponent implements OnInit, OnDestroy {
    selectedRow: User;
    isLoading = true;
    dataSource: MatTableDataSource<User> = new MatTableDataSource();
    displayedColumns: string[] = ['name', 'surname', 'phone'];
    subscription$ : Subscription;

    constructor(public dialogRef: MatDialogRef<ChooseSupervisiorComponent>, private userReadRepository: UsersReadRepository) {
    }
    onCloseDialog(): void {
        this.dialogRef.close(this.selectedRow);
      }

    ngOnInit() {
        this.subscription$ = this.userReadRepository.getSupervisiorUsers()
        .subscribe(
            data => 
            {
                this.isLoading = false,
                this.dataSource.data = data;
            }
        )
    }
    highlight(highlighted: boolean) {
        highlighted = !highlighted;
      }

    getSupervisiorRecordFromTable(user: User){
        this.selectedRow = user;
    }

    ngOnDestroy() {
        this.subscription$.unsubscribe();
    }
}

component.html

<h2 mat-dialog-title>{{'insideChats.chooseSupervisiorHeader' | translate}}</h2>
<mat-divider></mat-divider>
<div mat-dialog-content>
    <mat-table #table [dataSource]="dataSource" class="mat-elevation-z8">
        <ng-container matColumnDef="name">
            <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
            <mat-cell *matCellDef="let user"> {{user.name}} </mat-cell>
        </ng-container>
        <ng-container matColumnDef="surname">
            <mat-header-cell *matHeaderCellDef> Surname </mat-header-cell>
            <mat-cell *matCellDef="let user"> {{user.surname}} </mat-cell>
        </ng-container>
        <ng-container matColumnDef="phone">
            <mat-header-cell *matHeaderCellDef> Phone </mat-header-cell>
            <mat-cell *matCellDef="let user"> {{user.phone}} </mat-cell>
        </ng-container>
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;" 
        (click)="getSupervisiorRecordFromTable(row)"
        [ngClass]="{hovered: row.hovered, highlighted: row.highlighted}" (click)="row.highlighted = !row.highlighted" (mouseover)="row.hovered = true" (mouseout)="row.hovered = false"></mat-row >
    </mat-table>
    <mat-card class="loading-spinner" *ngIf="isLoading">
  <mat-progress-spinner 
    color="primary" 
    mode="indeterminate">
  </mat-progress-spinner>
</mat-card>
</div>
<mat-divider></mat-divider>
<div mat-dialog-actions>
    <button mat-dialog-close (click)="onCloseDialog()" mat-icon-button color="warn">
        <mat-icon>close</mat-icon>
    </button>
        <span class="buttons-spacer"></span>
    <button mat-button class="choose-button">{{'insideChats.chooseSupervisiorStartChat' | translate}}</button>
</div>

component.scss

.loading-spinner{
    display: flex; 
    justify-content: center; 
    align-items: center;
}

  .buttons-spacer {
    flex: 1 1 auto;
  }

  .mat-dialog-actions {
    justify-content: flex-end;
  }

  .basic-container {
    padding: 5px;
  }

  .mat-row.hovered {
    background: #eee;
  }

  .mat-row.highlighted {
    background: #999;
  }

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

如何通过取消选择最后一个点击的选择来实现行选择，然后与其他点击相同。

点总是可用的，只选择一行。

Answer 1

使用禁用多选的 SelectionModel 会使事情变得更容易。参见示例:https://material.angular.io/components/table/overview#selection .

这是 Stackblitz 上示例的修改版本，没有复选框，使用单选和您的表格的一些功能:https://stackblitz.com/edit/angular-2yv8hk?file=app/table-selection-example.html .

特别是:

TS

export class TableSelectionExample {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
  selection = new SelectionModel<PeriodicElement>(false, []);
}

HTML

<mat-row *matRowDef="let row; columns: displayedColumns;" 
  (click)="selection.toggle(row)" 
  [ngClass]="{hovered: row.hovered, highlighted: selection.isSelected(row)}"
  (mouseover)="row.hovered = true" (mouseout)="row.hovered = false">
</mat-row>