Question

我已将MatSortModule导入到组件中，并且可以单击标题，并且箭头如预期的那样显示，但列未排序：

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

  <ng-container *ngFor="let headElement of displayedColumns; let i=index">
    <ng-container matColumnDef="{{headElement}}">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{tableHeader[i]}}</th>
      <td mat-cell *matCellDef="let element" [ngClass]="(isMulitLine(element[headElement]))?'multiple-value':''">{{element[headElement]}}</td>
    </ng-container>
  </ng-container>

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

displayedColumns：

["title", "author", "pages", "copyright", "genre"]

数据源：

[{title: "Where the Sidewalk Ends", author: "Shel Silverstein", pages: "309", copyright: "November 20, 1974", genre: "Children's poetry"},
{title: "In the Eyes of Darkness", author: "Dean Koontz", pages: "384", copyright: "December 2, 2008", genre: "Mystery"},
{title: "IT", author: "Stephen King", pages: "1,138", copyright: "September 15, 1986", genre: "Horror fiction"},
{title: "Edgar Allan Poe: Collected Works", author: "Edgar Allan Poe", pages: "724", copyright: "November 1, 2011", genre: "Horror fiction"},
{title: "Goodnight Moon", author: "Margaret Wise Brown", pages: "30", copyright: "January 23, 2007", genre: "Children"},
{title: "The Illiad and the Odyssey", author: "Homer", pages: "642", copyright: "May 30, 2016", genre: "Adventure"},
{title: "Dracula", author: "Bram Stoker", pages: "236", copyright: "May 26, 1897", genre: "Horror fiction"},
{title: "A Midsummer Night's Dream", author: "William Shakespeare", pages: "96", copyright: "January 1, 1605", genre: "Play"}]

tableHeader（仅用于以编程方式显示标题）：

["Title", "Author", "Number of Pages", "Copyright", "High Level Genre and/or Category"]

ts：

export class TableComponent implements OnInit {

  @Input()
  tableData: any;

  @ViewChild(MatSort) sort: MatSort;

  public displayedColumns: string[];
  public dataSource = new MatTableDataSource<TableData>();
  public tableHeader: string[];

  constructor() { }

  ngOnInit() {
    // Extrapulate table data for mat-tables
    this.displayedColumns = Object.keys(this.tableData.data[0]).map(headerKey =>  headerKey);

    this.dataSource.data = this.tableData.data;

    this.tableHeader = this.tableData.header;

    this.dataSource.sort = this.sort;
  }

}

Answer 1

您的html看起来还不错，并且由于您没有提供完整的ts文件，因此我认为问题出在这里，让我们尝试以下操作。

HTML

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

  <ng-container *ngFor="let headElement of displayedColumns; let i=index">
    <ng-container matColumnDef="{{headElement}}">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{tableHeader[i]}}</th>
      <td mat-cell *matCellDef="let element" [ngClass]="(isMulitLine(element[headElement]))?'multiple-value':''">{{element[headElement]}}</td>
    </ng-container>
  </ng-container>

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

打字稿

@Component({
  ...
})
export class MyComponent implements OnInit {
  @ViewChild(MatSort) sort: MatSort;

  ngOnInit() {
    this.dataSource = new MatTableDataSource([/*some array*/]);
    this.dataSource.sort = this.sort;
  }
}

角matSort，标题可点击但没有排序吗？

1 个答案: