Item-sliding breaking

im having an issue where my ion-item-sliding stops working after updating a firebase database.

it will work on startup, slide it click the button that trigger the firebase update it closes the slider and won’t slide again until i f5 the page, it will break the slider on another page also.

it’s definitely the firebase update, i comment out that line and it works as normal. I even moved my db update to an express server to see if it would break and it still breaks that way.

I have tried showing the ngif as async and subscribing to the data, both ways produce the same result.

here is the page constructor

  constructor(
    public contactservice: ContactsService, 
    public punchcardservice: PunchcardService,
    public alertCtrl: AlertController,
    public httpClient: HttpClient,
    public afs: AngularFirestore,
    public route: Router) {   
      //this.items = afs.collection('punchcards').valueChanges();
      this.itemsCollection = this.afs.collection<any>('punchcards');
      this.items = this.itemsCollection.snapshotChanges().pipe(
          map(actions => {
              return actions.map(action => ({ id: action.payload.doc.id, ...action.payload.doc.data() }));
          })
          )
  }

here is the function

 usePunch(pc){
    let newAmount = pc.amount -1;
    return this.itemsCollection.doc(pc.id).update({amount: newAmount});
    console.log('punch used', pc)

  }
<ion-content>
  <ion-list >
    <h3>Slide left on your name to use</h3>
    <ion-item-sliding *ngFor="let owner of items | async">
      <ion-item >
          <h2 class="listing">{{owner.uid}} {{owner.amount}}</h2>
      </ion-item>
      <ion-item-options>
          <ion-button   (click)="usePunch(owner)">
                <ion-icon name="happy"></ion-icon>
                Punch!
          </ion-button>
          <ion-button color="tertiary" (click)="addPunch(owner)">
            <ion-icon name="add"></ion-icon>
            Refill
          </ion-button>
          <ion-button color="danger" (click)="editPunch(owner)">
        <ion-icon name="create"></ion-icon>
          Edit
        </ion-button>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
</ion-content>

Aren’t you actually facing that one https://github.com/ionic-team/ionic/issues/15486?

see my comment if you think that might be https://github.com/ionic-team/ionic/issues/15486#issuecomment-420025772

Omg yes, this works, thank you so much i never saw this…

1 Like

good to hear it worked out for you too :slight_smile: