matSort标头根本不对表进行排序

问题描述

• 实时演示: https://matsort-audionote.firebaseapp.com/(点击"标题"标题)
• 我的代码: https://github.com/AskYous/audio-note/commit/75c667f66ec4e15a5dbd460ec044938782d672a4

• Live Demo: https://matsort-audionote.firebaseapp.com/ (click the "title" header)
• My code: https://github.com/AskYous/audio-note/commit/75c667f66ec4e15a5dbd460ec044938782d672a4

我很难获得可排序的标题.我附上了我的应用程序的实时演示，该应用程序的标头排序不起作用，以及用于实现此功能的代码.当我单击标题时，没有响应.没有错误，没有排序，没有反馈.我做了以下事情:

I'm having a difficult time getting sortable headers to work. I attached a live demo of my app having header sorting not working, as well as the code I used to implement this. When I click on a header, I get not response. No errors, no sorting, no feedback. I did the following:

1. 在表中添加了matSort指令.
2. 在每个标头中添加了mat-sort-header.
3. 将MatSortModule导入到app.module.ts.
4. 为表数据源提供了MatSort指令.

1. Added matSort directive to the table.
2. Added mat-sort-header to each header.
3. Imported MatSortModule into app.module.ts.
4. Provided the MatSort directive to the table data source.

标题是可单击的，并且具有切换箭头，但是在单击时未对行进行排序.

The headers are clickable, and they have toggling arrows, but the rows are not being sorted on click.

推荐答案

这是因为在将表呈现为DOM之前，您正在将数据源的排序初始化为matSort(由于* ngIf)

It is because you are initializing your datasource's sort as matSort before table is rendered in DOM (because of the *ngIf)

this.notes.sort = this.sort;

更改此行

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

到

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

这篇关于matSort标头根本不对表进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！