Как убрать лишние значки переупорядочения? - PullRequest
Новая
       36

Как убрать лишние значки переупорядочения?

1 голос
/ 15 июня 2019

Кажется, что функция переупорядочения прикрепляет значки переупорядочения ко всем вложенным элементам в моем списке ngFor.Таким образом, с 2 пунктами, являющимися флажком и вводом текста, я получаю 2 дополнительных (всего 3) иконки для каждого элемента списка.Только один из них работает, два других просто визуально.Мне нужно удалить два других и просто иметь один значок чистого переупорядочения для каждого элемента или что-то в этом роде.

Я пытался удалить вложенные элементы, но флажок и ввод текста не работают.

/// Вот 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. Кажется,как функция переупорядочения поднимает и пытается пометить каждый внутренний элемент.

1 Ответ

0 голосов
/ 17 июня 2019

Следуйте учебнику Ionic 4

Судя по вашим комментариям, неясно, откуда у вас ваш метод, но это не то, что написано в документации, и это не то, что я видел раньше.

Я подозреваю, что вы используете какой-то устаревший режим поддержки из более ранней версии Ionic.

Я на самом деле только недавно научился использовать ion-reorder и следовал этому уроку:

Вы вставили правильный 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>

Test

В качестве теста я просто положил 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>

Оказалось нормально:

enter image description here

Реализация программно?

Все это заставляет меня думать, что это ошибка кодирования. Вы пытаетесь осуществить переупорядочение программно?

Пожалуйста, поделитесь своим фрагментом, но вам просто нужно использовать ion-reorder-group, ion-reorder и disable="false" для его отображения.

...