Question

我在这个项目中使用了很多表格，MatSort在所有其他组件中都运行良好。但是，我创建了这个新组件，尽管单击表头时可以显示箭头，但数据本身并未排序。

我已经将项目的每一行与Sort Header Angular演示以及已经运行良好的组件进行了比较，但是我找不到问题出在哪里。下面显示的相关数据是对象数组。我在这里简化了它，只显示每个对象的sequence值。

<table mat-table [dataSource]="dataSource" matSort *ngIf="dataSource">

    <ng-container matColumnDef="sequence">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Sequence</th>
      <td mat-cell *matCellDef="let item">{{ item.sequence }}</td>
    </ng-container>

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

columnsToDisplay = [
    'sequence'
  ];

  dataSource: MatTableDataSource<SuiteItem>;
@ViewChild(MatSort) sort: MatSort;

constructor(
    private keyCodeService: KeyCodeService
  ) {
  }

  ngOnInit(): void {
    this.keyCodeService.getSequences().subscribe(
      data => {
        this.dataSource = new MatTableDataSource(data);
        this.dataSource.sort = this.sort;
      }
    );
  }

我有matSort指令和mat-sort-header到位，导入了模块（并且在其他组件上工作正常），并且一个函数运行了this.dataSource.sort = this.sort方法，因此当我单击标题时，它们应该在升序和降序之间切换。相反，尽管出现了箭头，但数据没有任何反应。

Answer 1

<table mat-table [dataSource]="dataSource" matSort [hidden]="dataSource.data.length != 0">

    <ng-container matColumnDef="sequence">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Sequence</th>
      <td mat-cell *matCellDef="let item">{{ item.sequence }}</td>
    </ng-container>

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

不能将* ngIf用于排序。不起作用。尝试将此代码与[hidden]一起使用。

MatSort显示箭头，但实际上并没有对数据进行排序

1 个答案: