Ionic Item Sliding ngIf问题

Question

我有一个显示行程详细信息的ion-list。对于行程的状态，有一个ion-item-sliding元素，它允许用户根据状态执行一些操作。

问题是，当执行操作并且状态更新时，用于显示/隐藏操作的*ngIf似乎正在影响滑动行为。

例如，我有以下示例，如果状态为booked，则用户可以滑动，单击"pickup"，然后状态更改为in_progress。问题是滑动行为使得"complete“选项被展开，如果您手动关闭它(以编程方式或如果用户关闭它)，则无法重新打开它：

<ion-list>
  <ion-item-divider color="primary">
    <ion-label>Trip 1</ion-label>
  </ion-item-divider>
  <ion-item-sliding #itemSlidingStatus>
    <ion-item>
      <ion-label>Status:</ion-label> {{status}}
    </ion-item>
    <ion-item-options side="end" *ngIf="status === 'booked'">
      <ion-item-option (click)="pickup()">Pickup</ion-item-option>
    </ion-item-options>
    <ion-item-options side="end" *ngIf="status === 'in_progress'">
      <ion-item-option (click)="complete()">Complete</ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

import { Component, ViewChild } from '@angular/core';
import { IonItemSliding } from '@ionic/angular';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('itemSlidingStatus') private itemSlidingStatus: IonItemSliding;

  status = 'booked';

  complete(): void {
    this.status = 'completed';
  }

  pickup(): void {
    this.status = 'in_progress';
  }
}

小提琴：https://stackblitz.com/edit/angular-ivy-jegkyc

如何才能在通过调用itemSlidingStatus.close()关闭滑动选项时，元素可以重新打开？

Answer 1

您可以将所有ion-item-option放在单个ion-item-options中

<ion-item-options side="end">
    <ion-item-option *ngIf="status === 'booked'" (click)="pickup()">
        Pickup
    </ion-item-option>

    <ion-item-option *ngIf="status === 'in_progress'" (click)="complete()">
        Complete
    </ion-item-option>
</ion-item-options>