Use of trackBy with ngFor causes problems

[cca-developer]

I have tried to make use of the trackBy function to increase performance as discussed here. When I add the trackBy function, though, my onUpdate function runs properly, but the items are always moved back to their original position. How can I get the benefits of both trackBy and sortableJS?

[smnbbrv]

Hi @cca-developer ,

I don't think this is currently possible. Marking for possible v3 improvements

[arno-le]

I managed to use trackBy with a nested array without any problems. Is this some special case?

<div [sortablejs]="chartArray" class="area">
    <div *ngFor="let chart of chartArray; trackBy: chartTracker">
      <app-line-chart 
        [name]="chart[0].label"
        [suggestedMin]="chart[2].data[0]"
        [suggestedMax]="chart[1].data[0]"
        [chartData]="chart"></app-line-chart>
    </div>
  </div> 

[smnbbrv]

@ygerg hem. Interesting. Probably I should start closing the issues without a plunkr / stackblitz samples :D

@cca-developer does it solve your problem?

[cca-developer]

I didn't think mine was a special case:

<div [sortablejs]="itemsControl" [sortablejsOptions]="sortEventOptions" formArrayName="itemsControl">
        <proposal-item *ngFor="let item of itemsControl.controls; trackBy: trackItemByFn;  let i=index" [formGroupName]="i"
            [proposalItemForm]="item" 
            (removeItem)="removeItem($event)">
        </proposal-item>
</div>

Then the track by function is just:

trackItemByFn(index, item) {
    return index+","+item.proposalRevisionItemID;
}

Could mine be a problem because of the use of a form??

[arno-le]

@cca-developer If you already haven't, simplify the trackBy and try returning only item.proposalRevisionItemID. Or remove it completely, and then call (removeItem)="removeItem($event, index, item.proposalRevisionItemID), if that's what you need.

[cca-developer]

@ygerg I did try all of those suggestions. The only way I can produce consistent and correct behavior of the sorting is by not having trackBy at all.

[smnbbrv]

Honestly I would be surprised if it worked out, because the current system does not even logically support it as is. That's why I think it should be covered / targeted in a newer version because it requires changes of the library engine

[robtong21]

Any updates on whether this support will be added anytime soon?