Ng-zorro-antd: nz-transfer renderList call always

[tumblingG]

Reproduction link

https://stackblitz.com/run

Steps to reproduce

when I use the nz-transfer with a renderList table, like the demo in the ant-design, , convertItems(items) function is always call which make the page die。

What is expected?

only when the data change that can call the convertItems(items)

What is actually happening?

call always

| Environment | Info |
|---|---|
| ng-zorro-antd | 8.1.2 |
| Browser | Google Chrome 78.0.3904.70 |

[vthinkxie]

@tumblingG 在template上绑定有副作用的方法是100%错误的写法，所有你写在模板里的函数，每次脏值检测的时候100%会被重新执行，请仔细阅读 angular 文档
希望这个例子能让你明白为什么你写错了
https://stackblitz.com/edit/angular-rp4qqx?file=src%2Fapp%2Fapp.component.html

[tumblingG]

thanks, I do this because I imitate the demo in the ant-design, so I hope that you will fixed it.

[vthinkxie]

thanks, I do this because I imitate the demo in the ant-design, so I hope that you will fixed it.

all components under ng-zorro docs site are under OnPush mode, which won't trigger the change detection so frequently, on the other hand, there are no side effects in our doc return items.filter(i => !i.hide);. the stuck of your browser will only happen when you try to console something under that function.
we will change another implement anyway, thanks for your comments.

[tumblingG]

I has another question, I do as what you said, I do not use the convertItems(items) in the template

<nz-table #t [nzData]="items" nzSize="small">

but when I transfer the data form left to right, the UI does not render.
so I change Component to the OnPush mode, and use

<nz-table #t [nzData]="convertItems(items)" nzSize="small"

it does, but the call of convertItems(items) is frequent, so what can I do for this.

[tumblingG]

I see the source code for nz-transfer:

private truthMoveTo(direction: TransferDirection, list: TransferItem[]): void {
    const oppositeDirection = direction === 'left' ? 'right' : 'left';
    const datasource = direction === 'left' ? this.rightDataSource : this.leftDataSource;
    const targetDatasource = direction === 'left' ? this.leftDataSource : this.rightDataSource;
    for (const item of list) {
      item.checked = false;
      item.hide = false;
      item.direction = direction;
      datasource.splice(datasource.indexOf(item), 1);
    }
    targetDatasource.splice(0, 0, ...list);
    this.updateOperationStatus(oppositeDirection);
    this.nzChange.emit({
      from: oppositeDirection,
      to: direction,
      list
    });
    this.markForCheckAllList();
  }

it add or remove items use the Array.prototype.splice method, so the reference of the source data does not change, it will not make the Component dirty, is it a bug?

[vthinkxie]

you should make the data as a local variable other than a function convert
cc @cipchk

[tumblingG]

you should make the data as a local variable other than a function convert

yes, I use items in the template ,but the ui does not render when tranfrer data from left to right.

[vthinkxie]

if you meet some problem, the best way is providing the repro link

[tumblingG]

demo repro link https://stackblitz.com/edit/angular-rzsvy4-orujae