matSort 标题根本不排序表 [英] matSort headers not sorting table at all

问题描述

• 现场演示: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 标题根本不排序表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！