ion-item-options not displaying

问题:

I am developing an app using Ionic 3. I have an ion-item-sliding wrapped within an ion-list. I need to show the options when the list item is swiped. I got the color working but the text is not displaying at all. I don't have any css applied to the button at all.

<ion-list text-wrap>
      <ion-list-header>
        ...
      </ion-list-header>
      <ion-item *ngIf="classes?.length === 0">No Data</ion-item>
      <ion-item-group *ngFor="let classObj of classes">
        <ion-item-divider>...</ion-item-divider>
        <ion-item-sliding *ngFor="let class of classObj?.classes">
          <ion-item *ngFor="let class of classObj?.classes">
            <ion-grid>
              ...
            </ion-grid>
          </ion-item>
          <ion-item-options side="right">
            <button ion-button color="secondary">
              Change
            </button>
          </ion-item-options>
        </ion-item-sliding>
      </ion-item-group>
    </ion-list>

I have no idea what went wrong. This happened to both Android and iOS

回答1:

Its ok I have found the solution. I mistakenly *ngFor both ion-item-sliding and ion-item hence the slider breaks. I removed *ngFor in the ion-item and everything is works fine now

回答2:

I think you have to provide small cancel button next to your ion-select, which appears only when the user has already selected something:

<ion-label>Options</ion-label>
<ion-select [(ngModel)]="option">
   <ion-option value="f">Female</ion-option>
   <ion-option value="m">Male</ion-option>
</ion-select>

<div *ngIf="option=='m' || option=='f'">
<ion-label> {{option}} </ion-label>
<ion-button  (click)='removeSelection()'>
   <ion-icon name='close'></ion-icon>
</ion-button>