Angular Material：所选行转到 table 中的第一个位置

Question

使用 Angular 和 Material，我创建了一个简单的 table 来显示数据列表。

您可以在 Stackblitz 上找到 table> angular-mat-table-selected-cell

我的目的是select用高亮显示一行。当该行被 select 编辑时，它位于 table 顶部的第一位。我尝试了很多方法，但没有任何效果...有什么帮助吗？

谢谢！ =D

mat-table-cell-selected.html

<div class="example-container mat-elevation-z8">
  <table mat-table [dataSource]="dataSource">

    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <th mat-header-cell *matHeaderCellDef> No. </th>
      <td mat-cell *matCellDef="let people"> {{people.position}} </td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let people"> {{people.name}} </td>
    </ng-container>

    <!-- Age Column -->
    <ng-container matColumnDef="age">
      <th mat-header-cell *matHeaderCellDef> Age </th>
      <td mat-cell *matCellDef="let people"> {{people.age}} </td>
    </ng-container>

    <!-- Initials Column -->
    <ng-container matColumnDef="initials">
      <th mat-header-cell *matHeaderCellDef> Initials </th>
      <td mat-cell *matCellDef="let people"> {{people.initials}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>

mat-table-cell-selected.ts

import {Component} from '@angular/core';

/**
 * @title Table with sticky header
 */
@Component({
  selector: 'mat-table-cell-selected',
  styleUrls: ['mat-table-cell-selected.css'],
  templateUrl: 'mat-table-cell-selected.html',
})

export class MatTableCellSelected {
  displayedColumns = ['position', 'name', 'age', 'initials'];
  dataSource = ELEMENT_DATA;
}

export interface People {
  position: number;
  name: string;
  age: number;
  initials: string;
}

const ELEMENT_DATA: People[] = [
  {position: 1, name: 'Ben', age: 46, initials: 'BG'},
  {position: 2, name: 'Hugo', age: 9, initials: 'HG'},
  {position: 3, name: 'Theo', age: 6, initials: 'TG'},
  {position: 4, name: 'Emy', age: 42, initials: 'EC'},
  {position: 5, name: 'Wamwam', age: 24, initials: 'BB'},
  {position: 6, name: 'Defre', age: 12, initials: 'FK'},
  {position: 7, name: 'Zakk', age: 56, initials: 'ZW'},
  {position: 8, name: 'Ned', age: 61, initials: 'NF'},
  {position: 9, name: 'Tryphon', age: 91, initials: 'TT'},
  {position: 10, name: 'Misrilou', age: 19, initials: 'MF'},
];

mat-table-cell-selected.css

.example-container {
  height: 400px;
  overflow: auto;
}

table {
  width: 100%;
}

Answer 1

在您的行定义中，您想要添加一个 click 事件用于选择和一个 ngClass 以突出显示所选行

<tr mat-row 
   *matRowDef="let row; columns: displayedColumns;" 
   [ngClass]="{'highlight': selectedRowPosition == row.position}"
   (click)="moveToTop(row)"></tr>

从那里你想添加以下代码来找到过滤掉坏行的索引，然后将它推到数据集的顶部。

export class MatTableCellSelected {
  displayedColumns = ['position', 'name', 'age', 'initials'];
  dataSource = ELEMENT_DATA;
  selectedRowPosition = -1;

  moveToTop(ev) {
     this.dataSource = this.dataSource.filter(r => r.position !== ev.position);
     this.dataSource = [ev].concat(this.dataSource);
     this.selectedRowPosition = ev.position;
  }
}

这是一个有效的 stackblitz

编辑：这是我用来获得答案的计算器

add to start of array

Angular Material：所选行转到 table 中的第一个位置

Angular Material: selected row goes to the first position in the table

angular-material

angular

mat-table