离子项滑动 ngIf 问题

问题描述

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

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

例如，我有以下示例，如果状态为已预订，则用户可以滑动，单击“提货”，状态更改为 in_progress。问题是滑动行为使得“完成”选项被展开，如果您手动关闭它（以编程方式或用户关闭它），则无法重新打开它：

<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() 关闭滑动选项时重新打开元素？

解决方法

你可以把你所有的 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>