Angular 2拖放列表项

Question

Unfortunately, I don't have the code in hand and it's more of a curious question. Also, I don't have any experience with Angular 1 but have studied Angular 2 a bit. Is there a way for a Component to NOT render in certain conditions?

For example, say there's single vertical column that display's music song and the user can drag/drop into specific order. I can do the drag-drag but I don't want Angular 2 to rerender the entire list using *ngFor because HTML is already in the correct state. At the same time, say

private musicItem[] : MusicItem;

needs to be in sync for the order change. Any feedback would be appreciated! Perhaps, I'm doing this all wrong and I was thinking of using either jquery/GSAP to do drag/drop.

Answer 1

Don't know if you solved your problem, but I believe the easiest way is to drop an element after dragging and reorder elements in the array musicItem[] (for example, in the drop event handler if you are using ng2-dragula) and then let Angular2 rerender the list. At least this solution works for me.