ионный 4:не работает, как ожидалось - PullRequest
Новая
       75

ионный 4:не работает, как ожидалось

0 голосов
/ 07 февраля 2019

Я работаю с ионным 4 угловым 7. Я использую <ion-reorder>, чтобы изменить порядок списка.Drag n Drop отлично работает в первый раз, но когда я отпускаю click, предмет застрял.После первого повторного заказа все зависает.И я не могу попытаться изменить порядок во второй раз.

Здесь мой файл .html 

<ion-list lines="none">
      <ion-reorder-group disabled="false">
        <ion-reorder>
          <ion-item>
            <ion-thumbnail no-margin item-start>
              <img src="../assets/images/5.jpg">
            </ion-thumbnail>
            <div class="pl-2">
              <h5 no-margin>Multan</h5>
              <p no-margin>Historical place...</p>
            </div>
            <ion-buttons slot="end">
              <ion-button>
                <ion-icon slot="icon-only" name="close"></ion-icon>
              </ion-button>
            </ion-buttons>
          </ion-item>
        </ion-reorder>
        <ion-reorder>
          <ion-item>
            <ion-thumbnail no-margin item-start>
              <img src="../assets/images/5.jpg">
            </ion-thumbnail>
            <div class="pl-2">
              <h5 no-margin>Multan</h5>
              <p no-margin>Historical place...</p>
            </div>
            <ion-buttons slot="end">
              <ion-button>
                <ion-icon slot="icon-only" name="close"></ion-icon>
              </ion-button>
            </ion-buttons>
          </ion-item>
        </ion-reorder>
        <ion-reorder>
          <ion-item>
            <ion-thumbnail no-margin item-start>
              <img src="../assets/images/5.jpg">
            </ion-thumbnail>
            <div class="pl-2">
              <h5 no-margin>Multan</h5>
              <p no-margin>Historical place...</p>
            </div>
            <ion-buttons slot="end">
              <ion-button>
                <ion-icon slot="icon-only" name="close"></ion-icon>
              </ion-button>
            </ion-buttons>
          </ion-item>
        </ion-reorder>
        <ion-reorder>
          <ion-item>
            <ion-thumbnail no-margin item-start>
              <img src="../assets/images/5.jpg">
            </ion-thumbnail>
            <div class="pl-2">
              <h5 no-margin>Multan</h5>
              <p no-margin>Historical place...</p>
            </div>
            <ion-buttons slot="end">
              <ion-button>
                <ion-icon slot="icon-only" name="close"></ion-icon>
              </ion-button>
            </ion-buttons>
          </ion-item>
        </ion-reorder>
      </ion-reorder-group>
    </ion-list>

Когда я перетаскиваю n Drop Item.Он застрял, когда я уронил его.После этого все зависает.

Любая помощь ...?

enter image description here

Я использую

Ionic: 4.10.2 Угловая: 7.3.0

Ответы [ 3 ]

0 голосов
/ 03 апреля 2019

ionic4 версия:

HTML-код: 

<ion-content>
  <ion-list>
        <ion-list-header>
            <ion-label>INCLUDE</ion-label>
        </ion-list-header>
        <ion-reorder-group (ionItemReorder)="reorder($event)" [disabled]="false">
            <ion-item *ngFor="let accessory of accessories">
                <ion-label>{{accessory}}</ion-label>
                <ion-reorder></ion-reorder>
            </ion-item>
        </ion-reorder-group>
   </ion-list>
</ion-content>

машинописный код: 

accessories = ['test', 'test1', 'test2'];

reorder(event) {
        const itemToMove = this.accessories.splice(event.detail.from, 1)[0];
        this.accessories.splice(event.detail.to, 0, itemToMove);
}

Это никогда не приведет к возникновению ошибок любого типа, это работает.Я уверен на 100%, использовал 3-4 раза.Я надеюсь, это также поможет вам.

0 голосов
/ 16 августа 2019 
  <ion-list >
              <ion-item-group (ionItemReorder)="reorder($event)"  reorder='true' >
                <ion-item *ngFor="let item of file_uri" (click)="openSubMenu(item.bunch)" style="background-color: #F0F0F0">
                <ion-avatar item-left >
                  <img src="assets/{{item.bunch}}.svg">
                </ion-avatar>  

                  <h2 color="primary_secound">{{item.bunch}}
                  </h2>
                  <p>Click To See Menu of {{item.bunch}} 
                  </p>

                  <ion-icon name="arrow-dropright" item-right></ion-icon>

                </ion-item>
              </ion-item-group>
              </ion-list> 
reorder(event) {
        const itemToMove = this.file_uri.splice(event.from, 1)[0];
        this.file_uri.splice(event.to, 0, itemToMove);
    }
0 голосов
/ 07 февраля 2019

Я думаю, вам нужно хранить ваши данные в переменной и ngFor на этих данных, чтобы создавать элементы переупорядочения. 

this.items: Array<img: string; title: string; description: string; icon: 
string> = [yourArrayOfObjects];

Думаю, вам нужно перехватить событие ionItemReorder, например, 

<ion-reorder-group (ionItemReorder)="reorderItems($event)" disabled="false">

и в вашем .ts функция reorderItems () может быть 

reorderItems(ev) {
    const itemMove = this.items.splice(ev.detail.from, 1)[0];
    this.items.splice(ev.detail.to, 0, itemMove);
    ev.detail.complete();
}
...