Angular 角度排序，标题可点击但没有排序？

我将

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>

数据源：

[{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（仅用于以编程方式显示标题）：

ts:

导出类TableComponent实现OnInit{
@输入（）
表数据：任何；
@ViewChild（MatSort）排序：MatSort；
公共显示列：字符串[]；
公共数据源=新MatTableDataSource（）；
公共表头：字符串[]；
构造函数（）{}
恩戈尼尼特（）{
//为mat表格添加表格数据
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；
}
}

您的

html

看起来没问题，因为您没有提供完整的

ts

文件，我假设问题就在那里，所以让我们试试下面的方法

HTML

---

请您也给我们提供您的

.ts

好吗？在您的

上.ts

应该是这样一个道具

@ViewChild（MatSort）sort:MatSort

你有数据源的

sort

属性，比如

this.datasource.sort=this.sort

我用ts更新了问题。组件通过指令

传递数据，并按照

mat表

期望数据的方式在组件级别拆分。当我记录

this.datasource

时，我看到

matSort

对其产生影响，但仍无法排序。我注意到日志输出中的

sort

对象是空的。结果是，您不能同时使用

*ngIf

和

matSort

。你必须使用

ng if

才能起作用。此外，你的答案是最有帮助的，填补了一些空白。谢谢好。这对我来说是一件新鲜事。谢谢

[{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"}]

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

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;
  }

}

<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;
  }
}