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

【问题标题】：How to work ion-item-sliding with *ngFor?如何使用 *ngFor 进行离子项目滑动？
【发布时间】：2019-03-11 15:22:00
【问题描述】：

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

任何帮助都会很有启发性！

【问题讨论】：

标签： html angular ionic-framework

【解决方案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

【讨论】：