Select 在 mat-table 中只有一行，如果 select 其他行则取消 select 第一个

Question

我想实现 table 只有一行 selection。现在我有多个 selection。

我试过双门轿车的方式来做到这一点，我坚持使用这个。

图形示例：

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; 
  }

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

点总是可用的select只有一行。

Answer 1

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

这是 Stackblitz 上示例的修改版本，没有复选框并使用单选和您的 table 的一些功能：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>

Answer 2

有没有办法获取行的索引？（我真的不用angular）所以你把data中点击行时的索引保存为'pastIndex'，定义一个点击行时的方法，伪代码：

rowClick (index) {
  if (this.pastIndex is defined) {
      data[this.pastIndex].highlighted = false
  }
  this.pastIndex = index
  data[index].highlighted = true
}

如果不是，这并不理想，但您可以遍历整个数据并将所有数据设为假，然后只将您需要的数据设为真

rowClick (index) {
  for (var i = 0; i < data.length; i++) {
    data[i].highlighted = false
  }
  data[index].highlighted = true
}

Answer 3

这是使用 Mat 选择单个和多个复选框的完美示例 Table https://stackblitz.com/edit/angular-mat-table-selection

Mat table 选择作为属性enter code herey selection.selected 其中包含所有选择的

Angular 官方文档 https://material.angular.io/components/table/overview#selection

selectHandler(row: PeriodicElement) {
    if (this.displayType == SelectType.single) {
    /* Single checkbox Selection*/
    if (!this.selection.isSelected(row)) {
        this.selection.clear();
    }
    }
/* Multiple checkbox Selection*/
    this.selection.toggle(row);
  }

Select 在 mat-table 中只有一行，如果 select 其他行则取消 select 第一个

Select only one row in mat-table and if select other one then unselect first one

css

typescript

angular-material

angular5

mat-table