How to remove extra reorder icons? - ionic-framework

Question

The reorder function seems to be attaching reorder icons to all the nested items within my ngFor list. So with 2 items being a checkbox and a text-input, I get 2 extra (3 total) reorder icons per list item. Only one of them works, the other two are just visual. I need to remove the other 2 and just have one clean reorder icon per item, or something to that effect.
I have tried removing the nested items, but the checkbox and text-input don't work.
/// Here is the HTML ///
<ion-list no-lines [reorder]="reorderIsEnabled" (ionItemReorder)="itemReordered($event)" id="lowtrimlist">
<ion-item-sliding *ngFor="let task of tasks; let taskIndex = index">
<ion-item>
<ion-row>
<ion-col col-1>
<ion-item no-lines>
<ion-checkbox></ion-checkbox>
</ion-item>
</ion-col>
<ion-col col-11>
<ion-item>
<ion-textarea>
</ion-textarea>
</ion-item>
</ion-col>
</ion-row>
</ion-item>
<ion-item-options side="right">
<button ion-button color="danger"(click)="delete()">
<ion-icon name="trash"></ion-icon>
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
What I'm looking for is there to be one single reorder icon per line item, but instead there are 3. It seems like the reorder function picks up and tries to label every internal item.

Answer 1

Follow an Ionic 4 tutorial
Based on your comments it's not clear where you have got your method from but it's not what the documentation says, and it's not what I have seen before.
I suspect you are using some kind of legacy support mode from earlier version of Ionic.
I actually just learned to use ion-reorder myself recently and I followed this tutorial:
https://www.freakyjolly.com/ionic-4-ion-reorder-list-drag-drop-sorting-list-in-ionic-4-using-ion-reorder-component/
Did you paste the right html snippet?
I would expect to see a combination of ion-reorder-group and ion-reorder like this:
<ion-list>
<ion-reorder-group (ionItemReorder)="onReorderItems($event)" [disabled]="!isGameRunning">
<ion-item *ngFor="let item of listItems" [class]="item?.cssClass">
<ion-label>{{ item?.name }} </ion-label>
<ion-reorder slot="end"></ion-reorder>
</ion-item>
</ion-reorder-group>
</ion-list>
Test
As a test I just put an extra ion-item inside the ion-item above and ran it in a little game I made recently:
<ion-list>
<ion-reorder-group (ionItemReorder)="onItemReorder($event)" [disabled]="!isGameRunning">
<ion-item *ngFor="let item of listItems" [class]="item?.cssClass">
<ion-label>{{ item?.name }} </ion-label>
<ion-item>inner item</ion-item>
<ion-reorder slot="end"></ion-reorder>
</ion-item>
</ion-reorder-group>
</ion-list>
It rendered ok:
Implementing programmatically?
All of this is leading me to think that its a coding error. Are you trying to implement the reordering programmatically?
Please share your snippet but you just need to use the ion-reorder-group, ion-reorder and disable="false" to display it.