Question

嗨，我很难让matSort在任何列上工作。

我一定想念一些小东西，但我不知道它是什么。

这是我的html：

    <mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8 mb-4">
      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
      <ng-container matColumnDef="label">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Label </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.label}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="value">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Value </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.value}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="disabled">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Enable / Disable </mat-header-cell>
        <mat-cell *matCellDef="let element"> <button type="button" class="btn btn-primary" (click)="toggleDisable()">Enable</button> </mat-cell>
      </ng-container>
    </mat-table>

这是我的component.ts文件：

import {Component, OnInit, ViewChild} from '@angular/core';
import { MatSort, MatTableDataSource } from '@angular/material';

interface PeriodicElement {
  label: string;
  value: string;
  disabled: boolean;
}

const ELEMENT_DATA: PeriodicElement[] = [
  { label: 'efg', value: 'efg', disabled: false },
  {label: 'a', value: 'a', disabled: false },
  { label: 'b', value: 'b', disabled: false },
  { label: 'c', value: 'c', disabled: false },
];

@Component({
  templateUrl: './edit-catalog.component.html',
})
export class EditCatalogComponent implements OnInit, OnDestroy {
  displayedColumns: string[] = ['label', 'value', 'disabled'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);
  @ViewChild(MatSort) sort: MatSort;

  constructor() {}

  ngOnInit() {
    this.dataSource.sort = this.sort;
  }

按照说明文件操作，我确定这是一个粗心的错误，但目前绝对看不到。

html文件中可能缺少语法吗？

我还已经在modules.ts文件中导入了MatSortModule和MatTableModule

matSort不从标题排序

0 个答案: