ItemSliding - Text doesn't appear

Ionic Framework ionic-v3
1

Hi all.

I’m following the ItemSliding docs,

but the text doesn’t appear.

And one more problem is that I can only slide ‘1’ button. (when I slide 2 or 3, the 1 button slides)

이미지 1
이미지 1.png382×558 27.6 KB
이미지 2
이미지 2.png382×558 27.4 KB

My code is like below:

code.ts

<ion-content padding>
  <ion-item-group>
    <ion-item-divider color="light">File List</ion-item-divider>

    <ion-list>
      <ion-item-sliding #item>

          <ion-item *ngFor="let t of temp"> {{t}} </ion-item>

        <ion-item-options side="right">
          <button ion-button>Download</button>
          <button ion-button color="danger">Download</button>

        </ion-item-options>
        <ion-item-options side="left">
          <button ion-button>Download</button>
          <button ion-button color="danger">Download</button>
        </ion-item-options>

      </ion-item-sliding>
    </ion-list>

  </ion-item-group>
</ion-content>

code.html

export class CodePage {
  temp = ['1', '2', '3'];  

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams) {
  }
}

This is pretty simple, but I don’t know what’s wrong.

2

Your logic has a little error. You loop on the <ion-item></ion-item> instead of <ion-item-sliding #item></ion-item-sliding #item>. Copy and paste the code I have below, your problem will be solve.

<ion-content padding>
    <ion-item-group>
      <ion-item-divider color="light">File List</ion-item-divider>
      <ion-list>
        <ion-item-sliding #item *ngFor="let t of temp">
          <ion-item> {{t}} </ion-item>
  
          <ion-item-options side="right">
            <button ion-button>Download</button>
            <button ion-button color="danger">Download</button>
          </ion-item-options>
  
          <ion-item-options side="left">
            <button ion-button>Download</button>
            <button ion-button color="danger">Download</button>
          </ion-item-options>
  
        </ion-item-sliding>
      </ion-list>
    </ion-item-group>
  </ion-content>

The text doesn’t appear, yes by default but you could add some more style(.css) to make it visible each time you slide the item.

1 Like
3

Thank you for your nice answer. It works perfectly. Appreciate it very much.

4

Happy to know it works for you perfectly, cheers :beers:

1 Like