Ionic-framework: [Ionic V4.0.0-beta.7] [Ion-Item-Sliding] Sliding funktioniert nicht, nachdem ein Element im Array geleert wurde

Erstellt am 7. Sept. 2018  ·  30Kommentare  ·  Quelle: ionic-team/ionic-framework

Fehlerbericht

Ionische Info
Führen Sie ionic info an einer Terminal / cmd-Eingabeaufforderung aus und fügen Sie die folgende Ausgabe ein.

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

Beschreibe den Fehler
Ich habe ein Array von 3 Elementen erstellt und das verwendetund dieAnweisung, um eine Liste der verschiebbaren Elemente anzuzeigen. Jedes Element verfügt über eine Schaltfläche zum Entfernen, um das Zielelement zu entfernen. Nach dem Entfernen eines Elements funktioniert das Gleiten jedoch nicht mehr für die verbleibenden Elemente

Schritte zum Reproduzieren
Schritte zum Reproduzieren des Verhaltens:

  1. Gehe zu '...'
  2. Klicke auf '....'
  3. Scrollen Sie nach unten zu '....'
  4. Siehe Fehler

Zugehöriger Code

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

Erwartetes Verhalten
Es wird angenommen, dass das Schieben für jedes Element auch nach dem Entfernen eines Elements korrekt funktioniert

Zusätzlicher Kontext
Listen Sie alle anderen Informationen auf, die für Ihr Problem relevant sind. Stapelspuren, verwandte Probleme, Vorschläge zur Behebung, Stapelüberlauf-Links, Forum-Links, Screenshots, Betriebssystem, falls zutreffend usw.

core bug

Hilfreichster Kommentar

Hatte auch das gleiche Problem mit einer dynamischen Liste von Elementen, ein Element mit dem zu löschenWenn Sie dann die Elemente aktualisieren, können andere Elemente erst nach einer Aktualisierung gelöscht werden.

Nachdem ich mich umgesehen hatte, bemerkte ich, dass es ohne die Aktualisierung der Elemente gut funktionierte. In den Dokumenten gibt es eine Methode, um alle verschiebbaren Elemente auf dem Element oder in der Liste zu schließen. Damit wurde das Problem behoben.

  1. Geben Sie der Ionenliste eine ID #dynamicList
  2. Zugriff auf diese Liste über die ID @ViewChild('dynamicList') dynamicList;
  3. Beim Klicken von <ion-item-option> Triggern den dynamicList.closeSlidingItems() , bevor die Aufzeichnung zu löschen.

Hoffe, das hilft in der Zwischenzeit, ich bin neu in Angular, also mache ich hoffentlich nichts so Dummes.

Alle 30 Kommentare

Ich habe das gleiche Problem.
Übrigens funktionieren die gleitenden Elemente nach dem Löschen nicht mehr, müssen die App neu laden

@ quynh-ng Ich habe das gleiche Problem, ich musste auf Beta.5 downgraden :(

Witzig, gerade auf diesem Problem gelandet, könnte bestätigen, dass, wenn ich mit einer Aktion auf Element der Gleitliste lösche, die verbleibenden Elemente nicht mehr verschoben werden konnten

ps: in beta.8 ist das auch der fall

@ quynh-ng same -_-

Hatte auch das gleiche Problem mit einer dynamischen Liste von Elementen, ein Element mit dem zu löschenWenn Sie dann die Elemente aktualisieren, können andere Elemente erst nach einer Aktualisierung gelöscht werden.

Nachdem ich mich umgesehen hatte, bemerkte ich, dass es ohne die Aktualisierung der Elemente gut funktionierte. In den Dokumenten gibt es eine Methode, um alle verschiebbaren Elemente auf dem Element oder in der Liste zu schließen. Damit wurde das Problem behoben.

  1. Geben Sie der Ionenliste eine ID #dynamicList
  2. Zugriff auf diese Liste über die ID @ViewChild('dynamicList') dynamicList;
  3. Beim Klicken von <ion-item-option> Triggern den dynamicList.closeSlidingItems() , bevor die Aufzeichnung zu löschen.

Hoffe, das hilft in der Zwischenzeit, ich bin neu in Angular, also mache ich hoffentlich nichts so Dummes.

Nicht alle Helden tragen Umhänge, danke @jcollings für die Lösung!

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 es funktioniert gut, aber ist es eine Lösung oder eine Problemumgehung?

@ Anthony2539 wahrscheinlich ein bisschen von beidem: stecken_out_tongue_winking_eye:

Ich weiß nicht, ob es sich um eine Funktionsanforderung oder einen Fehler handelt

Ich denke, in letzter Zeit wurden einige Verpflichtungen in Bezug auf Verschiebungen eingegangen. Vielleicht ist / wird das Problem verschwinden

Nehmen wir an, die Problemumgehung funktioniert und meine App wird wahrscheinlich nicht aktiviert

Ich würde sagen, es ist eher ein Fehler, da ich ein Downgrade durchführen musste, damit meine e2e-Tests erneut bestanden wurden

Dieses Problem ist offensichtlich ein Fehler. Das Entfernen eines Elements sollte vor dem Löschen nicht geschlossen werden müssen. Es ist lustig.

Ich habe festgestellt, dass eine andere Problemumgehung darin besteht, den Verweis auf das ItemSliding an die Löschmethode zu übergeben und dann nur dieses eine Element zu schließen, bevor das Listenelement gelöscht wird:

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 Vielen Dank, dass Sie mein Problem perfekt gelöst haben.

arbeite nicht für mich !!!

Problemumgehung funktioniert bei mir nicht, mit oder ohne Aufruf der Methoden close oder closeSlidingItems .
Was mir aufgefallen ist, ist: Nachdem ich das Objekt ausgeblendet und dann wieder angezeigt habe, scheint das Schieben nicht zu funktionieren. Wenn Sie jedoch versuchen, ein Objekt zu verschieben und dann auf die Stelle klicken, an der sich die Schaltfläche befinden soll, können Sie die Schaltflächenaktion auslösen.
Hier ist ein Stackblitz-Beispiel .
Auf Stackblitz verwende ich @ionic/[email protected] , aber es gibt auch ein Problem mit @ionic/[email protected] auf meinem lokalen Computer.

Vielen Dank, dass Sie sich damit befasst haben. Es funktioniert in Ordnung.
Trotzdem ist dies immer noch ein Problem, das vom ionischen Team angegangen werden muss ...

@ mimacom-klier Workaround funktioniert für mich auf dem neuesten Ionic (4.5.0).

BEARBEITEN : Die Verwendung der

Diese Lösung funktioniert bei mir mit:
Ionische CLI: 4.5.0
Ionisches Gerüst: @ ionic / angle 4.0.0-beta.17

Ich glaube jedoch, dass dies immer noch ein Problem ist, das behoben werden sollte. Ich bezweifle, dass ein Entwickler dieses Verhalten erwarten würde.

Gleiche für mich. Umgehung shmorkaround. Hauptsache, es bringt mich aus einem großen Loch und ich bin @jcollings dafür dankbar

Wauw .. hat den ganzen Tag meinen Kopf darüber gewickelt (hatte auch die Folie nach dem Aktualisieren der Listenelemente nicht funktioniert). Jetzt herausgefunden warum. Vielen Dank an Problemumgehung . Hoffe, dieser Fehler wird behoben.

Hallo,

Angesichts des folgenden Problems:

Problem:
Ion Item Sliding funktioniert nur zum ersten Mal. Es reagiert nicht mehr, wenn ich das Ionenelement schiebe, dann zu einer anderen Seite gehe und zurückkomme.

Versuchte die von @jcollings vorgeschlagene Problemumgehung. Es wurde versucht, alle gleitenden Ionenelemente beim Verlassen der Ansicht wie folgt zu schließen:

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

hat aber nicht funktioniert.

Mein Slider-Code lautet wie folgt:

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

Habe es mit der neuesten ionischen Version 4.0.0-rc.0 versucht. Das Problem besteht weiterhin.

Hallo,

Ich habe versucht, mit diesem Problem herumzuspielen, und festgestellt, dass in meinem Fall der Schuldige für den Ion Item Slider nicht mehr reagierte, dass die Schiebeoptionen nicht geschlossen wurden, wenn die Ansicht geändert wurde. Also habe ich folgendes gemacht und es hat perfekt funktioniert:

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

  }

Vielen Dank an @jcollings.

Ich habe das nicht angezogen:
in .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);
        }
}

funktioniert perfekt
Vielen Dank an @jcollings.

Kann bestätigen, dass das Problem mit 4.0.0-rc.0 weiterhin besteht.

Kann bestätigen, dass dies auch in 4.0.0-rc.1 vorhanden ist

Dieser Fehler ist in 4.0.0-rc.2 noch vorhanden.
Ich verwende ein Ion-Item-Sliding in Virtual-Scroll, daher kann ich List.closeSlidingItems () nicht verwenden.
Wenn ich ein Objekt nicht schiebe und die Ansicht mit der Zurück-Taste oder etwas anderem verlasse, funktioniert das Verschieben des Elements beim nächsten Mal überhaupt nicht mehr. Ich kann in diesem Fall kein (Klick-) Ereignis verwenden, da ich die Folie öffne und einfach gehe. Es gibt keine Änderung zum Abfangen (Klicken) des Ereignisses.

Eine weitere Problemumgehung. Für mich geht das.

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

Lieber Brandy,

@brandyscarney kannst du einen Blick darauf werfen? Wir befinden uns in der Migrationsphase zu Version 4 und ich würde gerne die Meinung des Ionenteams hören. Sieht mir wichtig aus.

vielen Dank.
Norbert

Danke, dass du mich markiert hast! Ich habe es unserem Projektboard hinzugefügt, um es zu untersuchen.

@manucorporat @mhartington @paulstelzer

Vielen Dank für diese Ausgabe! Dies wurde von PR # 17492 zusammengeführt. Es wird in der nächsten Version sein: 4.1.0 . Bitte lassen Sie uns wissen, wenn Sie danach immer noch Probleme sehen.

Danke für das Problem! Dieses Problem wird gesperrt, um Kommentare zu vermeiden, die für das ursprüngliche Problem nicht relevant sind. Wenn dies immer noch ein Problem mit der neuesten Version von Ionic ist, erstellen Sie bitte ein neues Problem und stellen Sie sicher, dass die Vorlage vollständig ausgefüllt ist.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

vswarte picture vswarte  ·  3Kommentare

masimplo picture masimplo  ·  3Kommentare

danbucholtz picture danbucholtz  ·  3Kommentare

BilelKrichen picture BilelKrichen  ·  3Kommentare

manucorporat picture manucorporat  ·  3Kommentare