Question

我想只用一行选择来实现表。现在我有多种选择。

我尝试了轿跑车的方式来做到这一点，但我坚持了这一步。

图形示例：

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>

Answer 2

是否有获取行索引的方法？（我并不是真的使用角度的）所以您在单击数据中的行时将索引保存为“ 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

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

Mat table Selection 作为属性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);
  }

在垫子表格中仅选择一行，如果选择另一行，则取消选择第一行

3 个答案: