Ionic-framework: [Ionic V4.0.0-beta.7] [انزلاق عنصر أيوني] لا يعمل الانزلاق بعد إفراغ عنصر في المصفوفة

تم إنشاؤها على ٧ سبتمبر ٢٠١٨  ·  30تعليقات  ·  مصدر: ionic-team/ionic-framework

تقرير الشوائب

المعلومات الأيونية
قم بتشغيل ionic info من موجه Terminal / cmd والصق الناتج أدناه.

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

صف الخلل
لقد أنشأت مصفوفة من 3 عناصر واستخدمت ملفو التوجيه لإظهار قائمة العناصر المتدحرجة. يحتوي كل عنصر على زر إزالة لإزالة العنصر الهدف ، ولكن بعد إزالة عنصر واحد ، يتوقف الانزلاق عن العمل للعناصر المتبقية

خطوات التكاثر
خطوات إعادة إنتاج السلوك:

  1. اذهب إلى '...'
  2. انقر فوق "...."
  3. مرر لأسفل إلى "...."
  4. انظر الخطأ

التعليمات البرمجية ذات الصلة

<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);
}

سلوك متوقع
يفترض أن الانزلاق يعمل بشكل صحيح لكل عنصر حتى بعد إزالة عنصر

سياق إضافي
ضع قائمة بأي معلومات أخرى ذات صلة بمشكلتك. تتبع المكدس والمشكلات ذات الصلة والاقتراحات حول كيفية الإصلاح وروابط Stack Overflow وروابط المنتدى ولقطات الشاشة ونظام التشغيل إن أمكن وما إلى ذلك.

core bug

التعليق الأكثر فائدة

كانت هناك أيضًا نفس المشكلة ، مع قائمة ديناميكية من العناصر ، وحذف عنصر بامتدادالمكون ، ثم تحديث العناصر يتسبب في عدم قدرته على حذف أي عناصر أخرى حتى التحديث.

بعد البحث ، لاحظت أنه بدون تحديث العناصر ، كان يعمل بشكل جيد ، بالنظر إلى المستندات ، هناك طريقة لإغلاق جميع العناصر المنزلقة في العنصر أو في القائمة. باستخدام هذا حل المشكلة.

  1. إعطاء قائمة الأيونات معرف #dynamicList
  2. الوصول إلى تلك القائمة بواسطة المعرف @ViewChild('dynamicList') dynamicList;
  3. عند النقر على <ion-item-option> يؤدي إلى تشغيل dynamicList.closeSlidingItems() قبل حذف السجل.

آمل أن يكون هذا مفيدًا في هذه الأثناء ، فأنا جديد على الزاوي لذا آمل ألا أفعل أي شيء بهذا الغباء.

ال 30 كومينتر

حصلت على نفس القضية.
بالمناسبة ، لا تعمل العناصر المنزلقة بعد حذف عنصر ، تحتاج إلى إعادة تحميل التطبيق

@ quynh-ng لدي نفس المشكلة ، لقد اضطررت إلى الرجوع إلى الإصدار التجريبي 5 :(

مضحك ، لقد هبطت للتو على هذه المشكلة أيضًا ، يمكن أن يؤكد ، إذا حذفت بإجراء على عنصر من القائمة المنزلقة ، فلا يمكن تحريك العناصر المتبقية بعد الآن

ملاحظة: في beta.8 هذا هو الحال أيضًا

@ quynh-ng نفس _-

كانت هناك أيضًا نفس المشكلة ، مع قائمة ديناميكية من العناصر ، وحذف عنصر بامتدادالمكون ، ثم تحديث العناصر يتسبب في عدم قدرته على حذف أي عناصر أخرى حتى التحديث.

بعد البحث ، لاحظت أنه بدون تحديث العناصر ، كان يعمل بشكل جيد ، بالنظر إلى المستندات ، هناك طريقة لإغلاق جميع العناصر المنزلقة في العنصر أو في القائمة. باستخدام هذا حل المشكلة.

  1. إعطاء قائمة الأيونات معرف #dynamicList
  2. الوصول إلى تلك القائمة بواسطة المعرف @ViewChild('dynamicList') dynamicList;
  3. عند النقر على <ion-item-option> يؤدي إلى تشغيل dynamicList.closeSlidingItems() قبل حذف السجل.

آمل أن يكون هذا مفيدًا في هذه الأثناء ، فأنا جديد على الزاوي لذا آمل ألا أفعل أي شيء بهذا الغباء.

ليس كل الأبطال يرتدون الكاب ،

لغة البرمجة:

 <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 يعمل بشكل جيد ولكن هل هو حل أم حل بديل؟

@ Anthony2539 ربما قليلاً من الاثنين: stuck_out_tongue_winking_eye:

لا أعرف ما إذا كان طلب ميزة أم خطأ

أعتقد أن بعض الالتزامات المتعلقة بالانزلاق قد تم إجراؤها مؤخرًا ، لذلك ربما تختفي / ستختفي المشكلة

على أي حال ، دعنا نقول أن هذا الحل يعمل ولن يسلح تطبيقي على ما أعتقد

أود أن أقول إنه خطأ أكثر منذ أن اضطررت إلى الرجوع إلى إصدار أقدم للحصول على اختبارات e2e لاجتيازها مرة أخرى

من الواضح أن هذه القضية خطأ. يجب ألا تحتاج إزالة عنصر إلى إغلاقه قبل حذفه ، إنه أمر مضحك.

لقد وجدت أن هناك حلًا آخر هو تمرير المرجع إلى ItemSliding إلى طريقة الحذف ثم إغلاق هذا العنصر فقط قبل حذف عنصر القائمة:

لغة البرمجة:

<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 شكرًا جزيلاً لك على حل مشكلتي تمامًا.

لا يعمل لي !!!

لا يعمل الحل البديل بالنسبة لي ، مع أو بدون استدعاء طرق close أو closeSlidingItems .
ما لاحظته هو: بعد إخفاء العنصر ثم إظهاره مرة أخرى ، فإن الانزلاق لا يبدو أنه يعمل ، ولكن إذا حاولت تحريك عنصر ثم النقر فوق الزر حيث يجب أن يكون ، يمكنك بالفعل تشغيل إجراء الزر.
هنا مثال Stackblitz .
في Stackblitz ، أستخدم @ionic/[email protected] ، لكن المشكلة موجودة أيضًا مع @ionic/[email protected] على جهازي المحلي.

bockoblur : راجعت مثال Stackblitz الخاص بك وتلاعبت به قليلاً. إذا قمت بالفعل بحذف العناصر من القائمة ، يبدو أن الحل البديل يعمل بشكل جيد. إذا كانت مخفية فقط ثم ظهرت مرة أخرى ، فسيكون السلوك كما وصفته تمامًا. يبدو أن هذه مشكلة في التحويل: الترجمة لم يتم تطبيقها بشكل صحيح على عنصر عنصر القائمة. ربما لا يزال مكون ItemSliding يستخدم مرجع DOM القديم لترجمة العنصر. يمكنك العثور على المثال المعدل هنا: https://stackblitz.com/edit/ionic-4-item-sliding-show-hide-error-zxgbmf

شكرا للنظر في هذا. إنه يعمل بشكل جيد.
ومع ذلك ، لا تزال هذه مشكلة تحتاج إلى معالجة من قبل الفريق الأيوني ...

يعمل حل @ mimacom-klier بالنسبة لي على الإصدار الأيوني الأخير (4.5.0).

تحرير: استخدام حل jcollings يعمل بشكل إضافي لإضافة و / أو تحديث عنصر ، مما تسبب في نفس المشكلة بالنسبة لي. شكرا لك!

يعمل هذا الحل بالنسبة لي باستخدام:
أيوني CLI: 4.5.0
الإطار الأيوني: @ الأيوني / الزاوي 4.0.0-beta.17

ومع ذلك ، أعتقد أن هذه لا تزال مشكلة يجب إصلاحها ، وأشك في أن أي مطور يتوقع هذا السلوك.

نفس الشيء بالنسبة لي. عمل حول shmorkaround. الشيء الرئيسي هو أنه يخرجني من حفرة كبيرة وأنا ممتن لـ

Wauw .. كان يلف رأسي طوال اليوم حول هذا (أيضًا لم تعمل الشريحة بعد تحديث عناصر القائمة). اكتشف الآن لماذا. jcollings Thankx عن الحل. آمل أن يتم إصلاح هذا الخطأ.

مرحبا،

مواجهة المشكلة أدناه:

القضية:
يعمل Ion Item Sliding لأول مرة فقط. يتوقف عن الاستجابة عند تحريك العنصر الأيوني ، ثم الانتقال إلى صفحة أخرى والعودة.

جربت العمل الذي اقترحهjcollings. حاولت إغلاق جميع العناصر الأيونية المنزلق عند مغادرة العرض على النحو التالي:

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

لكنها لم تنجح.

رمز شريط التمرير الخاص بي هو كما يلي:

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

لقد جربت مع أحدث إصدار أيوني 4.0.0-rc.0. المشكلة لا تزال قائمة.

مرحبا،

لقد حاولت التعامل مع هذه المشكلة ووجدت أنه في حالتي ، أصبح الجاني في Ion Item Slider غير مستجيب هو أنه كلما تغير العرض ، لم يتم إغلاق خيارات الانزلاق. لذلك فعلت الشيء التالي وعملت على أكمل وجه:

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();
        }
      }
    });

  }

شكرا جزيلا لjcollings.

لم أفعل هذا:
بتنسيق 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);
        }
}

يعمل بشكل مثالي
شكرا جزيلا لjcollings.

يمكن تأكيد أن المشكلة لا تزال قائمة مع 4.0.0-rc.0.

يمكن تأكيد وجود هذا في 4.0.0-rc.1 أيضًا

لا يزال هذا الخطأ موجودًا في 4.0.0-rc.2.
أستخدم عنصر أيون منزلق داخل التمرير الافتراضي ، لذلك لا يمكنني استخدام List.closeSlidingItems ().
إذا لم أغلق عنصرًا منزلقًا وتركت العرض باستخدام زر الرجوع أو شيء ما ، فحينئذٍ يتوقف العنصر المنزلق عن العمل في المرة القادمة على الإطلاق. لا يمكنني استخدام (النقر) الحدث في هذه الحالة لأنني أفتح المنزلق وأغادر. لا يوجد تغيير للقبض على (النقر) الحدث.

حل آخر. إنه يعمل بالنسبة لي.

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);
   }

عزيزي براندي ،

brandyscarney هل يمكنك إلقاء نظرة؟ نحن في مرحلة الانتقال إلى الإصدار 4 وأود أن أسمع رأي الفريق الأيوني. تبدو لي قضية مهمة.

شكرا جزيلا.
نوربرت

شكرا لتوصيفي لقد أضفته إلى لوحة مشروعنا للنظر فيه.

manucorporatmhartingtonpaulstelzer

شكرا على هذه المشكلة! تم دمج هذا بواسطة PR # 17492. سيكون في الإصدار التالي: 4.1.0 . يرجى إخبارنا إذا كنت لا تزال تواجه مشاكل بعد ذلك.

شكرا على المشكلة! تم قفل هذه المشكلة لمنع التعليقات غير ذات الصلة بالمشكلة الأصلية. إذا استمرت المشكلة في أحدث إصدار من Ionic ، فالرجاء إنشاء مشكلة جديدة والتأكد من ملء النموذج بالكامل.

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات