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

caro 发表于 Dev

昂贵

我正在尝试实现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语句放置在标记内和标记中。不行

任何帮助将是启发性的！

塞巴费雷拉斯

就像您在“文档”中看到的一样，该元素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>