ionic2
Lösning för 'show-delete' i deprecation

Lösning

Jag utvecklar en mobilapp med ionic 2 med Angular 2.

Jag har en jon-lista fyllda jon-artiklar. Jag vill att dessa jonobjekt ska ha möjlighet att raderas om det behövs, som det presenteras här på den joniska webbplatsen.

Mycket har emellertid förändrats i ionic 2 sedan den första versionen och ovanstående stil med en knapp som öppnar alla jon-objekt på en är inte längre möjlig eftersom show-delete och show-order inte längre stöds. Det enda tillgängliga alternativet är att ha jon-objektglidning som jon-objekt, vilket ger oss möjligheten att skjuta varje objekt en åt gången för att avslöja raderingsknappen.

Det var inte vad jag ville ha. Jag ville ha en knapp som öppnar alla jonobjekt samtidigt.

Efter att ha lagt lite tid på det kom jag fram till en fungerande lösning och lyckades uppnå det önskade resultatet med ionic 2, och jag kommer att dela det med dig.

Här är min lösning:

I .html-filen:

<ion-header>
  <ion-navbar>
    <ion-buttons start (click)="manageSlide()">
      <button>
        <ion-icon name="ios-remove"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>PageName</ion-title>
  </ion-navbar>
</ion-header>

och för listan:

<ion-list #list1>
  <ion-item-sliding #slidingItem *ngFor="let contact of contacts | sortOrder">
    <button #item ion-item>
      <p>{{ item.details }}</p>
      <ion-icon id="listIcon" name="arrow-forward" item-right></ion-icon>
    </button>
    <ion-item-options side="left">
      <button danger (click)="doConfirm(contact, slidingItem)">
        <ion-icon name="ios-remove-circle-outline"></ion-icon>
      Remove
      </button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

I filen .ts gör du först dina import:

import { ViewChild } from '@angular/core';
import { Item } from 'ionic-angular';
import { ItemSliding, List } from 'ionic-angular';

hänvisa sedan till html-elementet genom att förklara en ViewChild:

@ViewChild(List) list: List;

Lägg till slut dina klasser för att hantera arbetet:

public manageSlide() {

    //loop through the list by the number retreived of the number of ion-item-sliding in the list
    for (let i = 0; i < this.list.getElementRef().nativeElement.children.length; i++) {

        // retreive the current ion-item-sliding
        let itemSlide = this.list.getElementRef().nativeElement.children[i].$ionComponent;

        // retreive the button to slide within the ion-item-sliding
        let item = itemSlide.item;

        // retreive the icon
        let ic = item._elementRef.nativeElement.children[0].children[1];

        if (this.deleteOpened) {
            this.closeSlide(itemSlide);
        } else {
            this.openSlide(itemSlide, item, ic);
        } 
    }

    if (this.deleteOpened) {
        this.deleteOpened = false;
    } else {
        this.deleteOpened = true;
    } 
}

Sedan öppningsklassen:

private openSlide(itemSlide: ItemSliding, item: Item, inIcon) {
  itemSlide.setCssClass("active-sliding", true);
  itemSlide.setCssClass("active-slide", true);
  itemSlide.setCssClass("active-options-left", true);
  item.setCssStyle("transform", "translate3d(72px, 0px, 0px)")
}

Och den avslutande klassen:

private closeSlide(itemSlide: ItemSliding) {
  itemSlide.close();
  itemSlide.setCssClass("active-sliding", false);
  itemSlide.setCssClass("active-slide", false);
  itemSlide.setCssClass("active-options-left", false);

}

Jag hoppas att det kommer att hjälpa vissa er där ute.

Njut av och bra kodning ...