-
Notifications
You must be signed in to change notification settings - Fork 3.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
nzTable 通过 *ngFor 动态生成列导致 nzSortChange 反复触发 #3603
Comments
Translation of this issue:nzTable causes nzSortChange to be triggered repeatedly by *ngFor dynamically generating columnsReproduction link[https://stackblitz.com/edit/angular-qq6zi1?file=src/app/app.component.ts](https://stackblitz.com/edit/angular-qq6zi1?file=src/app/app. Component.ts) Steps to reproduce
[Video] (https://s3.ssl.qhres.com/static/18b135736269b69b.mp4) What is expected?
What is actually happening?
|
@vthinkxie 大概定位了 bug 的原因。主要在这里:components/table/nz-thead.component.ts#L66 flatMap(() =>
merge<{ key: string; value: string }>(...this.listOfNzThComponent.map(th => th.nzSortChangeWithKey))
), 写了段原理类似的代码 —— import { merge, Subject } from "rxjs";
import { startWith, flatMap } from "rxjs/operators";
const subject = new Subject();
const array = [new Subject(), new Subject(), new Subject()];
subject
.pipe(
startWith(true),
flatMap(() => {
console.log(array.length);
return merge(...array);
})
)
.subscribe(console.log);
array[0].next("hello");
array[1].next("world");
array.pop().next("!");
subject.next(123);
array[0].next("hello");
array[1].next("world"); 执行效果如下: |
上面的例子 import { merge, Subject } from "rxjs";
import { startWith, switchMap } from "rxjs/operators";
const subject = new Subject();
const array = [new Subject(), new Subject(), new Subject()];
subject
.pipe(
startWith(true),
switchMap(() => {
console.log(array.length);
return merge(...array);
})
)
.subscribe(console.log);
array[0].next("hello");
array[1].next("world");
array.pop().next("!");
subject.next(123);
array[0].next("hello");
array[1].next("world"); |
@AngusFu 非常感谢 |
@vthinkxie 🙂 刚刚搜了下,貌似整个 repo 中还有另外三个地方使用了 https://github.com/NG-ZORRO/ng-zorro-antd/search?q=flatMap&unscoped_q=flatMap |
* chore: sync ant-design v3.19.6 (NG-ZORRO#3602) * fix(module:table): fix sortChange with dynamic columns (NG-ZORRO#3603) (NG-ZORRO#3605) close NG-ZORRO#3603 * chore: sync with antd 3.19 (NG-ZORRO#3590) * chore: sync with antd 3.19 * test(module:page-header): fix test * chore: refactor commit hook (NG-ZORRO#3610) * chore: refactor commit hook * chore(packaging): clean dependencie * chore(packaging): clean dev dependencie * chore: refactor commit hook (NG-ZORRO#3610) * chore: refactor commit hook * chore(packaging): clean dependencie * chore(packaging): clean dev dependencie * chore: refactor commit hook (NG-ZORRO#3610) * chore: refactor commit hook * chore(packaging): clean dependencie * chore(packaging): clean dev dependencie * build: refactor scripts ref NG-ZORRO#2474 * chore: update ci config * ci: fix integration * ci: add travis_wait * ci: fix ci * ci: fix ci * ci: fix ci * ci: fix ci * ci: fix ci * chore: fix type * build: add site release scripts * build: _ * build: add `test:watch` task * build: fix `test:watch` task * chore: bump node to 12.1.0 * ci: add now.json
* chore: sync ant-design v3.19.6 (NG-ZORRO#3602) * fix(module:table): fix sortChange with dynamic columns (NG-ZORRO#3603) (NG-ZORRO#3605) close NG-ZORRO#3603 * chore: sync with antd 3.19 (NG-ZORRO#3590) * chore: sync with antd 3.19 * test(module:page-header): fix test * chore: refactor commit hook (NG-ZORRO#3610) * chore: refactor commit hook * chore(packaging): clean dependencie * chore(packaging): clean dev dependencie * chore: refactor commit hook (NG-ZORRO#3610) * chore: refactor commit hook * chore(packaging): clean dependencie * chore(packaging): clean dev dependencie * chore: refactor commit hook (NG-ZORRO#3610) * chore: refactor commit hook * chore(packaging): clean dependencie * chore(packaging): clean dev dependencie * build: refactor scripts ref NG-ZORRO#2474 * chore: update ci config * ci: fix integration * ci: add travis_wait * ci: fix ci * ci: fix ci * ci: fix ci * ci: fix ci * ci: fix ci * chore: fix type * build: add site release scripts * build: _ * build: add `test:watch` task * build: fix `test:watch` task * chore: bump node to 12.1.0 * ci: add now.json
* chore: sync ant-design v3.19.6 (NG-ZORRO#3602) * fix(module:table): fix sortChange with dynamic columns (NG-ZORRO#3603) (NG-ZORRO#3605) close NG-ZORRO#3603 * chore: sync with antd 3.19 (NG-ZORRO#3590) * chore: sync with antd 3.19 * test(module:page-header): fix test * chore: refactor commit hook (NG-ZORRO#3610) * chore: refactor commit hook * chore(packaging): clean dependencie * chore(packaging): clean dev dependencie * chore: refactor commit hook (NG-ZORRO#3610) * chore: refactor commit hook * chore(packaging): clean dependencie * chore(packaging): clean dev dependencie * chore: refactor commit hook (NG-ZORRO#3610) * chore: refactor commit hook * chore(packaging): clean dependencie * chore(packaging): clean dev dependencie * build: refactor scripts ref NG-ZORRO#2474 * chore: update ci config * ci: fix integration * ci: add travis_wait * ci: fix ci * ci: fix ci * ci: fix ci * ci: fix ci * ci: fix ci * chore: fix type * build: add site release scripts * build: _ * build: add `test:watch` task * build: fix `test:watch` task * chore: bump node to 12.1.0 * ci: add now.json * ci: add now.json
Reproduction link
https://stackblitz.com/edit/angular-qq6zi1?file=src/app/app.component.ts
Steps to reproduce
columns: Array<{ key: 'string', title: string }>
用于动态设置 table 所展示的列<thead [nzSingleSort]="true" (nzSortChange)="onSortChange($event)">
*ngFor
生成一系列的<th nzShowSort [nzSortKey]="col.key">{{ col.title }}</th>
th
进行排序操作,发现只触发一次onSortChange
columns
数组,如删除一项th
进行排序操作,发现onSortChange
会触发两次onSortChange
会触发三次视频
What is expected?
nzSortChange
不应当反复触发What is actually happening?
nzSortChange
反复触发The text was updated successfully, but these errors were encountered: