ionic2
में 'शो-डिलीट' के लिए समाधान प्रतिवाद

समाधान

मैं कोणीय 2 के साथ आयनिक 2 का उपयोग करके एक मोबाइल ऐप विकसित कर रहा हूं।

मेरे पास आयन-सूची से भरे आयन-आइटम हैं। मैं चाहता हूं कि उन आयन-आइटम को हटाए जाने की क्षमता हो, जैसा कि आयनिक वेबसाइट पर यहां प्रस्तुत किया गया है।

हालाँकि, पहले संस्करण के बाद से आयनिक 2 में बहुत कुछ बदल गया है और एक बटन के ऊपर की शैली एक-एक करके सभी आयन-आइटम को खोलना संभव नहीं है क्योंकि शो-डिलीट और शो-रिकॉर्डर अब समर्थित नहीं हैं। उपलब्ध एकमात्र विकल्प आयन-आइटम-स्लाइडिंग आयन-आइटम के रूप में है, जो हमें डिलीट बटन को प्रकट करने के लिए एक बार में प्रत्येक आइटम को स्लाइड करने की क्षमता देता है।

वह नहीं है जो मैं चाहता था। मुझे एक बटन चाहिए था जो एक ही समय में सभी आयन-आइटम को खोलता है।

उस पर कुछ समय बिताने के बाद, मैं एक कार्यशील समाधान के साथ आया और आयनिक 2 का उपयोग करके वांछित परिणाम प्राप्त करने में कामयाब रहा, और मैं इसे आपके साथ साझा करने जा रहा हूं।

यहाँ मेरा समाधान है:

.Html फ़ाइल में:

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

और सूची के लिए:

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

.Ts फ़ाइल में, पहले अपना आयात करें:

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

तब ViewChild घोषित करके html तत्व देखें:

@ViewChild(List) list: List;

अंत में, काम को संभालने के लिए अपनी कक्षाओं को जोड़ें:

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

फिर शुरुआती वर्ग:

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

और समापन वर्ग:

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

}

मुझे आशा है कि यह आपकी कुछ मदद करेगा।

आनंद लें और अच्छा कोडिंग ...