Ng-zorro-antd: nzSortOrderChange 首次加载 点击排序会被触发多次

Created on 19 Dec 2020  ·  3Comments  ·  Source: NG-ZORRO/ng-zorro-antd

Reproduction link

https://stackblitz.com/edit/angular-n5mhv3?file=src/app/app.component.ts

Steps to reproduce

点击表头排序字段后可以看到 console 被多次打印

What is expected?

点击排序只触发一次

What is actually happening?

首次点击排序被触发了多次

| Environment | Info |
|---|---|
| ng-zorro-antd | 9.3-10.2.2 |
| Browser | chrome 87 |

help wanted

Most helpful comment

if you want to get an only once sort change event,
change the binding nzSortOrderChange event handler from <th> to <thead>
and add [nzColumnKey]="column.name" in <th> it will work, is this solve your issue?

      <thead (nzSortOrderChange)="orderChange($event)">
        <tr>
          <th
            *ngFor="let column of listOfColumns"
            [nzSortOrder]="column.sortOrder"
            ...
            [nzColumnKey]="column.name"
          >
            {{ column.name }}
          </th>
        </tr>
      </thead>

I think the API doc should be updated.

SortChange API property changed from
nzSortChange(8.5) ->
nzSortOrderChange(9.0 later)

but the API doc start missing thead block for no reason but existed in 8.5 API doc (with property: nzSortChange),
and EventEmitter:nzSortOrderChange still exists in <th> and<thead> from 9.0 to current(11.4),

current doc, 8.5 doc

All 3 comments

Translation of this issue:

NZSortorderChange first loading Click order will trigger multiple times

reproduction link

https://stackblitz.com/edit/angular-n5mhv3?file=src/app/app.component.ts

steps to reproduce

Click on the header sort field and you can see the console More prints

What is expected?

Click to sort only trigger once

What is actually happens?

The first click of sort was triggered multiple times.

| ENVIRONMENT | INFO |
| --- | --- |
| Ng-Zorro-ANTD | 9.3-10.2.2 |
| Browser | chrome 87 |

Hello @C-racker. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please fill the Pull Request Template here, provide documentation/test cases if needed and make sure CI passed, we will review it soon. Appreciate it advance and we are looking forward to your contribution!

你好 @C-racker, 我们完全同意你的提议/反馈,欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请务必填写 Pull Request 内的预设模板,提供改动所需相应的测试用例、文档等,并确保 CI 通过,我们会尽快进行 Review,提前感谢和期待您的贡献!
giphy

if you want to get an only once sort change event,
change the binding nzSortOrderChange event handler from <th> to <thead>
and add [nzColumnKey]="column.name" in <th> it will work, is this solve your issue?

      <thead (nzSortOrderChange)="orderChange($event)">
        <tr>
          <th
            *ngFor="let column of listOfColumns"
            [nzSortOrder]="column.sortOrder"
            ...
            [nzColumnKey]="column.name"
          >
            {{ column.name }}
          </th>
        </tr>
      </thead>

I think the API doc should be updated.

SortChange API property changed from
nzSortChange(8.5) ->
nzSortOrderChange(9.0 later)

but the API doc start missing thead block for no reason but existed in 8.5 API doc (with property: nzSortChange),
and EventEmitter:nzSortOrderChange still exists in <th> and<thead> from 9.0 to current(11.4),

current doc, 8.5 doc

Was this page helpful?
0 / 5 - 0 ratings