如何解决离子项滑动 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。