Ionic-framework: [Ionic V4.0.0-beta.7] [ion-item-sliding] Geser tidak berfungsi setelah mengosongkan elemen dalam larik

Dibuat pada 7 Sep 2018  ·  30Komentar  ·  Sumber: ionic-team/ionic-framework

Laporan Bug

Info Ionic
Jalankan ionic info dari prompt terminal / cmd dan tempelkan output di bawah ini.

Ionic:

   ionic (Ionic CLI)          : 4.1.2 (C:\Users\fkrishna\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.7
   @angular-devkit/core       : 0.7.5
   @angular-devkit/schematics : 0.7.5
   @angular/cli               : 6.1.5
   @ionic/ng-toolkit          : 1.0.8
   @ionic/schematics-angular  : 1.0.6

System:

   NodeJS : v8.11.3 (C:\Program Files\nodejs\node.exe)
   npm    : 5.6.0
   OS     : Windows 10

Jelaskan Bugnya
Saya membuat sebuah array dari 3 elemen dan saya menggunakandandirektif untuk menampilkan daftar item geser. Setiap item memiliki tombol hapus untuk menghapus elemen target, tetapi setelah menghapus satu elemen, geser berhenti berfungsi untuk item yang tersisa

Langkah-langkah untuk Mereproduksi
Langkah-langkah untuk mereproduksi perilaku:

  1. Pergi ke '...'
  2. Klik '....'
  3. Gulir ke bawah ke '....'
  4. Lihat kesalahan

Kode Terkait

<ion-content>
  <ion-list>
    <ion-item-sliding *ngFor="let n of numbers; index as i">
      <ion-item>
        {{ n }}
      </ion-item>
      <ion-item-options>
        <ion-item-option " (click)="remove(i)">Delete</ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
numbers = ['1','2','3'];
  constructor() {}
  remove(i) {
    this.numbers.splice(i, 1);
}

Perilaku yang Diharapkan
geser dianggap berfungsi dengan benar untuk setiap item bahkan setelah menghapus elemen

Konteks Tambahan
Buat daftar informasi lain yang relevan dengan masalah Anda. Pelacakan tumpukan, masalah terkait, saran tentang cara memperbaikinya, tautan Stack Overflow, tautan forum, tangkapan layar, OS jika berlaku, dll.

core bug

Komentar yang paling membantu

Juga memiliki masalah yang sama, dengan daftar elemen yang dinamis, menghapus item dengankomponen, lalu menyegarkan elemen menyebabkannya tidak dapat menghapus elemen lain apa pun hingga menyegarkan.

Setelah menggali di sekitar saya perhatikan bahwa tanpa penyegaran elemen itu berfungsi dengan baik, melihat dokumen ada metode untuk menutup semua item geser pada item atau pada daftar. menggunakan ini memperbaiki masalah.

  1. Memberi ion-list sebuah id #dynamicList
  2. Mengakses daftar itu dengan id @ViewChild('dynamicList') dynamicList;
  3. Saat mengklik <ion-item-option> memicu dynamicList.closeSlidingItems() sebelum menghapus record.

Semoga ini membantu sementara itu, saya baru mengenal sudut jadi semoga saya tidak melakukan hal yang bodoh.

Semua 30 komentar

Saya mendapat masalah yang sama.
Ngomong-ngomong, item geser tidak berfungsi setelah menghapusnya, perlu memuat ulang aplikasi

@ quynh-ng Saya memiliki masalah yang sama, saya harus menurunkan versi ke beta.5 :(

Lucunya, baru saja mendarat masalah itu juga, bisa memastikan, jika saya menghapus dengan tindakan pada item dari daftar geser, item yang tersisa tidak dapat digeser lagi

ps: di beta.8 itu juga terjadi

@ quynh-ng sama -

Juga memiliki masalah yang sama, dengan daftar elemen yang dinamis, menghapus item dengankomponen, lalu menyegarkan elemen menyebabkannya tidak dapat menghapus elemen lain apa pun hingga menyegarkan.

Setelah menggali di sekitar saya perhatikan bahwa tanpa penyegaran elemen itu berfungsi dengan baik, melihat dokumen ada metode untuk menutup semua item geser pada item atau pada daftar. menggunakan ini memperbaiki masalah.

  1. Memberi ion-list sebuah id #dynamicList
  2. Mengakses daftar itu dengan id @ViewChild('dynamicList') dynamicList;
  3. Saat mengklik <ion-item-option> memicu dynamicList.closeSlidingItems() sebelum menghapus record.

Semoga ini membantu sementara itu, saya baru mengenal sudut jadi semoga saya tidak melakukan hal yang bodoh.

tidak semua pahlawan memakai jubah, terima kasih @jcollings untuk solusinya!

html:

 <ion-list #slidingList>
   <ion-item-sliding>
     <ion-item-options side="end">
        <ion-item-option (click)="delete()">
        </ion-item-option>
     </ion-item-options>
   </ion-item-sliding>
 </ion-list>

ts:

 import {List} from '@ionic/angular';

 @ViewChild('slidingList') slidingList: List;

 async delete() {
   // something
   await this.slidingList.closeSlidingItems();
 }

@peterpeterparker berfungsi dengan baik, tetapi apakah ini solusi atau solusi?

@ Anthony2539 mungkin sedikit dari keduanya: stuck_out_tongue_winking_eye:

Saya tidak tahu apakah itu permintaan fitur atau bug

Beberapa komitmen terkait slide telah dibuat baru-baru ini menurut saya, jadi mungkin masalahnya adalah / akan hilang

Bagaimanapun, katakanlah solusi itu berhasil dan tidak akan mempersenjatai aplikasi saya, saya kira

Saya akan mengatakan itu lebih merupakan bug karena saya harus menurunkan versi agar tes e2e saya lulus lagi

Masalah ini jelas merupakan bug. Hapus item tidak perlu menutupnya sebelum dihapus, itu lucu.

Saya menemukan bahwa solusi lain adalah meneruskan referensi ke ItemSliding ke metode delete dan kemudian menutup satu item itu sebelum menghapus item daftar:

HTML:

<ion-list>
  <ion-item-sliding *ngFor="let item of items" #slidingItem>
    <ion-item>>
      {{item.text}}
    </ion-item>
    <ion-item-options (ionSwipe)="deleteItem(slidingItem, item)">
      <ion-button color="danger" (click)="deleteItem(slidingItem, item)">
        <ion-icon name="trash"></ion-icon>
        Delete
      </ion-button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

TS:

async deleteItem(slidingItem: ItemSliding, item: Item) {
    slidingItem.close(); // <-- this is the important bit!
    await this.itemService.deleteItem(item);
  }

@ mimacom-klier Terima kasih banyak telah menyelesaikan masalah saya dengan sempurna.

tidak bekerja untuk saya !!!

Solusi tidak berhasil untuk saya, dengan atau tanpa memanggil metode close atau closeSlidingItems .
Yang saya perhatikan adalah: setelah saya menyembunyikan dan kemudian menampilkan item lagi, menggeser _seem_ tidak berfungsi, tetapi jika Anda mencoba untuk menggeser item dan kemudian mengklik di mana tombol _should_ berada, Anda sebenarnya dapat memicu tindakan tombol.
Berikut adalah contoh Stackblitz .
Di Stackblitz, saya menggunakan @ionic/[email protected] , tetapi masalah juga ada dengan @ionic/[email protected] di mesin lokal saya.

@bockoblur : Saya memeriksa contoh Stackblitz Anda dan bermain-main dengannya sebentar. Jika Anda benar-benar menghapus item dari daftar, solusi tersebut tampaknya berfungsi dengan baik. Jika mereka hanya disembunyikan dan kemudian ditampilkan lagi, perilakunya persis seperti yang Anda gambarkan. Tampaknya ini menjadi masalah dengan transform: translate tidak diterapkan dengan benar ke elemen item daftar. Mungkin komponen ItemSliding masih menggunakan referensi DOM lama untuk menerjemahkan item. Anda dapat menemukan contoh modifikasi saya di sini: https://stackblitz.com/edit/ionic-4-item-sliding-show-hide-error-zxgbmf

Terima kasih telah melihat ini. Ini bekerja dengan baik.
Namun demikian, ini masih menjadi masalah yang perlu ditangani oleh tim ionik ...

Solusi @ mimacom-klier berfungsi untuk saya di Ionic terbaru (4.5.0).

EDIT: Menggunakan solusi @jcollings juga berfungsi untuk menambahkan dan / atau memperbarui item, yang menyebabkan masalah yang sama bagi saya. Terima kasih!

Solusi ini berfungsi untuk saya menggunakan:
Ionic CLI: 4.5.0
Kerangka ionik: @ ionic / angular 4.0.0-beta.17

Namun, saya yakin ini masih merupakan masalah yang harus diperbaiki, saya ragu pengembang mana pun akan mengharapkan perilaku ini.

Sama untuk ku. Bekerja-sekitar shmorkaround. Hal utama adalah ini membuat saya keluar dari lubang besar dan saya berterima kasih kepada @jcollings untuk itu

Wauw .. membungkus kepalaku sepanjang hari tentang ini (juga memiliki slide yang tidak berfungsi setelah memperbarui item daftar). Sekarang cari tahu kenapa. Thankx @jcollings untuk solusinya. Semoga bug ini diperbaiki.

Hai,

Menghadapi masalah di bawah ini:

Isu:
Ion Item Sliding hanya berfungsi untuk pertama kali. Ia berhenti merespons ketika saya menggeser item ion, lalu pergi ke halaman lain & kembali.

Mencoba pekerjaan yang disarankan oleh @jcollings. Mencoba menutup semua geser item ion saat meninggalkan tampilan sebagai berikut:

ionViewWillLeave() {
    setTimeout(async() => {
      console.log('sliding list: ', this.slidingList);
      if(this.slidingList){
        await this.slidingList.closeSlidingItems();
      }
    },1000);
  }

tapi tidak berhasil.

Kode slider saya adalah sebagai berikut:

<ion-list #slidingList class="notifications" *ngIf="notificationCheck === 'true'">
    <ion-item-sliding *ngFor="let notification of notifications; index as i;">
      <ion-item lines="none" no-padding>
        <ion-row>
          <ion-col size="12" class="title">
            {{notification.title}}
          </ion-col>
          <ion-col size="12" class="description">
            {{notification.message}}
          </ion-col>
          <ion-col size="12" class="date-time">
            {{notification.createdDate | date:'medium'}}
          </ion-col>
          <i class="left-arrow"></i>
        </ion-row>
      </ion-item>
      <ion-item-options side="end">
        <ion-item-option color="secondary" (click)="goToURL(notification.actionURL)">
          <div slot="icon-only">
            <i class="fa fa-edit" *ngIf="notification.actionType === 'UPDATE'"></i>
            <i class="fa fa-eye" *ngIf="notification.actionType === 'VIEW'"></i>
          </div>
        </ion-item-option>
        <ion-item-option color="danger" (click)="deleteNotifications(notification.id)">
          <div slot="icon-only">
            <i class="fa fa-trash"></i>
          </div>
        </ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>

Telah mencoba dengan versi ionik terbaru 4.0.0-rc.0. Masalahnya masih ada.

Hai,

Telah mencoba bermain-main dengan masalah ini dan menemukan bahwa dalam kasus saya, penyebab Ion Item Slider menjadi tidak responsif adalah setiap kali tampilan diubah, opsi geser tidak ditutup. Jadi saya melakukan hal berikut & berhasil dengan sempurna:

constructor(private location: Location,  private router: Router) {

    this.navigationSubscription = this.router.events.subscribe(async(e: any) => {
      if (e instanceof NavigationStart) {
        if(this.slidingList){
          await this.slidingList.closeSlidingItems();
        }
      }
    });

  }

Terima kasih banyak kepada @jcollings.

Saya telah melakukan ini:
dalam .html

<ion-item-sliding #slidingItem>
<ion-item-option color="danger" (click)="del(slidingItem,carte)">Supprimer</ion-item-option>
in .ts
import {  IonItemSliding } from '@ionic/angular';

async del(slidingItem: IonItemSliding, carte){
    await slidingItem.close();
    let index = this.cartes.indexOf(carte);
        if(index > -1){
            this.cartes.splice(index, 1);
        }
}

bekerja dengan sempurna
Terima kasih banyak kepada @jcollings.

Dapat mengonfirmasi bahwa masalah masih ada dengan 4.0.0-rc.0.

Dapat mengonfirmasi bahwa ini juga ada di 4.0.0-rc.1

Bug ini masih ada di 4.0.0-rc.2.
Saya menggunakan ion-item-sliding di dalam virtual-scroll, jadi saya tidak dapat menggunakan List.closeSlidingItems ().
Jika saya tidak menutup geser item dan meninggalkan tampilan menggunakan tombol kembali atau sesuatu, maka geser item berhenti berfungsi sama sekali. Saya tidak dapat menggunakan (klik) acara dalam kasus ini karena saya membuka geser dan pergi begitu saja. Tidak ada perubahan untuk menangkap (klik) acara.

Solusi lain. Ini bekerja untuk saya.

in .html
<ion-item-sliding>....</ion-item-sliding>

in .ts
import {  IonItemSliding } from '@ionic/angular';
  @ViewChild(IonItemSliding) itemSliding: IonItemSliding;
   ionViewWillLeave() {
        setTimeout(() => { this.itemSliding.closeOpened(); }, 500);
   }

Brandy yang terhormat,

@brandyscarney dapatkah Anda melihatnya? kami sedang dalam fase migrasi ke v4 dan saya ingin mendengar pendapat tim ionik. Sepertinya saya masalah penting.

Terima kasih banyak.
norbert

Terima kasih telah menandai saya! Saya menambahkannya ke papan proyek kami untuk diperiksa.

@manucorporat @mhartington @paulstelzer

Terima kasih atas masalah ini! Ini telah digabungkan dengan PR # 17492. Ini akan ada di rilis berikutnya: 4.1.0 . Beri tahu kami jika Anda masih mengalami masalah setelah itu.

Terima kasih atas masalahnya! Masalah ini dikunci untuk mencegah komentar yang tidak relevan dengan masalah aslinya. Jika ini masih menjadi masalah dengan versi terbaru Ionic, buat masalah baru dan pastikan templatnya terisi penuh.

Apakah halaman ini membantu?
0 / 5 - 0 peringkat