如何删除多余的重新排序图标？

Question

重新排序功能似乎将重新排序图标附加到ngFor列表中的所有嵌套项目。因此，将2个项目作为一个复选框和一个文本输入，我为每个列表项获得2个额外的（共3个）重新排序图标。它们中只有一个起作用，另外两个只是视觉上的。我需要删除其他2个，并且每个项目只有一个干净的重新排序图标，或者类似的东西。

我尝试删除嵌套的项目，但是复选框和文本输入不起作用。

///这是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> 

我要寻找的是每个订单项只有一个重新排序图标，但是有3个。似乎重新排序功能开始工作并尝试标记每个内部项目。

Answer 1

遵循Ionic 4教程

根据您的评论，尚不清楚您从何处获得方法，但这不是文档所说的，也不是我以前见过的。

我怀疑您正在使用早期版本的Ionic的某种传统支持模式。

实际上，我最近刚学会了自己使用ion-reorder，并且遵循了本教程：

• https://www.freakyjolly.com/ionic-4-ion-reorder-list-drag-drop-sorting-list-in-ionic-4-using-ion-reorder-component/

您粘贴了正确的html代码段吗？

我希望看到ion-reorder-group和ion-reorder的组合，像这样：

  <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>

测试

作为测试，我只在上面的ion-item内放了一个额外的ion-item并在我最近制作的一个小游戏中运行了它：

  <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>

显示正常：

以编程方式实施？

所有这些使我认为这是编码错误。您是否正在尝试以编程方式实施重新排序？

请分享您的代码段，但您只需要使用ion-reorder-group，ion-reorder和disable="false"来显示它即可。