如何使用* ngFor进行离子项目滑动？

Question

我正在尝试实现ion-item-sliding选项，以创建可以在flex-box网格内滑动的离子卡。不幸的是，它似乎不能很好地工作。

具体来说，实际上什么也没有发生！无论我从哪个方向滑动，都没有发生滑动的迹象。

这是我到目前为止所拥有的：

<ion-content padding>
  <ion-grid>
  <ion-row>
    <ion-col col-6 offset-sm-3 *ngFor = "let list of listRef | async">
    <ion-item-sliding>
    <ion-item>
      <ion-card>
        <img *ngIf="list.color=='#f55f7c'" src="data:image/png;base64,iVBORw0dsfladj=">
        <img *ngIf="list.color=='#ffcb53'" src="data:image/png;base64,iVB5CYII=">
        <img *ngIf="list.color=='#85dec8'" src="data:image/png;base64,iVBORw0KGgoAAAANSU=">
      </ion-card>
    </ion-item>
    </ion-item-sliding>
    
    <ion-item-options side="left">
      <button ion-button>Favorite</button>
      <button ion-button color="danger">Share</button>
    </ion-item-options>
    
    </ion-col>           
   
    <button id="add-bttn" ion-button [navPush]="goNew"><ion-icon name="add"></ion-icon></button>
  </ion-row>      
  </ion-grid>  
</ion-content>

我已经尝试将* ngFor语句放在标记和标记中。不行。

任何帮助都会启发您！

Answer 1

就像您看到 in the Docs 一样，ion-item-options应该在 ion-item-sliding元素之内。此外，项目应放置在ion-list容器中。

所以这样的事情应该起作用：

<ion-content padding>
    <ion-list> <!-- Here I've added the ion-list -->
        <ion-row>
            <ion-col col-6 offset-sm-3 *ngFor = "let list of listRef | async">

                <ion-item-sliding>

                    <!-- Item -->
                    <ion-item>
                        <ion-card>
                            <img src="https://randomuser.me/api/portraits/men/51.jpg">
                        </ion-card>
                    </ion-item>

                    <!-- Options -->
                    <ion-item-options side="left">
                        <button ion-button>Favorite</button>
                        <button ion-button color="danger">Share</button>
                    </ion-item-options>

                </ion-item-sliding> <!-- This includes the options-->

            </ion-col>           

            <button id="add-bttn" ion-button [navPush]="goNew">
                <ion-icon name="add"></ion-icon>
            </button>

        </ion-row>      
    </ion-list>
</ion-content>

---

Stackblitz project