html - 如何使用 *ngFor 进行 ionic 项滑动？

Question

我正在尝试实现 ion-item-sliding 选项来创建可以在弹性盒网格内滑动的 ionic 卡。不幸的是，它似乎效果不太好。

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

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

<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