在 Angular 中对从父组件传递到子组件的列进行排序时出现问题

Question

我正在尝试将一列从 Angular 中的父组件传递到子组件，并且在该列上排序时遇到问题。这是我的代码：

父组件

<table-sorting-example matSort>
  <ng-container matColumnDef="another">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Another</th>
    <td mat-cell *matCellDef="let element">{{element.another}}</td>
  </ng-container>
</table-sorting-example>

子组件

<table mat-table [dataSource]="dataSource" matSort>
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Position</th>
    <td mat-cell *matCellDef="let element">{{element.position}}</td>
  </ng-container>

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

  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Weight</th>
    <td mat-cell *matCellDef="let element">{{element.weight}}</td>
  </ng-container>

  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Symbol</th>
    <td mat-cell *matCellDef="let element">{{element.symbol}}</td>
  </ng-container>

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

子组件 TS 文件

import {
  AfterViewInit,
  Component,
  ContentChildren,
  QueryList,
  ViewChild,
} from '@angular/core';
import { MatSort, Sort } from '@angular/material/sort';
import {
  MatColumnDef,
  MatTable,
  MatTableDataSource,
} from '@angular/material/table';

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
  another: string;
}
const ELEMENT_DATA: PeriodicElement[] = [
  { position: 5, name: 'Boron', weight: 10.811, symbol: 'B', another: 'A' },
  { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C', another: 'B' },
  { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N', another: 'C' },
  { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O', another: 'D' },
  { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F', another: 'E' },
  { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne', another: 'F' },
];
/**
 * @title Table with sorting
 */
@Component({
  selector: 'table-sorting-example',
  styleUrls: ['table-sorting-example.css'],
  templateUrl: 'table-sorting-example.html',
})
export class TableSortingExample implements AfterViewInit {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);

  @ViewChild(MatTable) myTable: MatTable<PeriodicElement>;
  @ViewChild(MatSort) sort: MatSort;
  @ContentChildren(MatColumnDef) private customCols: QueryList<MatColumnDef>;

  constructor() {}

  ngAfterViewInit() {
    this.dataSource.sort = this.sort;
    for (let col of this.customCols) {
      this.myTable.addColumnDef(col);
      this.displayedColumns.push(col.name);
    }
  }
}

如您所见，我在父组件和子组件上都使用了 matSort。但是，对“另一”列进行排序似乎不起作用。其他列按预期排序。

我检查了Angular文档和其他在线资源，但找不到这个问题的解决方案。有人可以帮助我理解为什么“另一个”列上的排序不起作用以及如何修复它吗？

您可以在 stackblitz

上找到完整代码

Answer 1

您将

customCols

和

addColumnDef

添加到材料表中。我的猜测是您必须对自定义列进行类似的操作才能进行排序。您是否尝试过在

register

上使用

MatSort

方法。比如：

for (let col of this.customCols) {
  this.myTable.addColumnDef(col);
  this.matSort.register({id: col.name, start: 'desc', disableClear: false});
  this.displayedColumns.push(col.name);
}

Answer 2

有人发现如何解决这个问题吗？