Ionic ItemSliding with ion-row loop答案

【问题标题】：Ionic ItemSliding with ion-row loopIonic ItemSliding with ion-row loop
【发布时间】：2018-07-18 18:18:10
【问题描述】：

<ion-list>
  <ion-item-sliding #item>
    <ion-item class="green">
      <ion-row class="row" *ngFor="let row of grid; let rowIndex=index">
        <ion-col class="col" col-1 *ngFor="let column of row; let colIndex=index">
          <button ion-button class='buttoncell' ion-button (click)="editEntryValue($event, rowIndex, colIndex)">{{column}}</button>
        </ion-col>
      </ion-row>
    </ion-item>
    <ion-item-options class="green" side="left">
      <button ion-button color="danger" (click)="deleteItem(item)">Entfernen</button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

问题：当我有多行并且我尝试滑动一个时，它会同时滑动所有行，而不是将操作按钮仅留在滑动的行上，该按钮显示为左侧的一个大按钮所有行。

【问题讨论】：

标签： row ionic3 slide

【解决方案1】：

您需要制作多个 ion-item-sliding 元素，而不是一个ion-item-sliding 元素中的多行。

<ion-list>
  <ion-item-sliding *ngFor="let row of grid; let rowIndex=index"> <!-- for loop here -->
    <ion-item class="green">
      <ion-row class="row">
        <ion-col class="col" col-1 *ngFor="let column of row; let colIndex=index">
          <button ion-button class='buttoncell' ion-button (click)="editEntryValue($event, rowIndex, colIndex)">{{column}}</button>
        </ion-col>
      </ion-row>
    </ion-item>
    <ion-item-options class="green" side="left">
      <button ion-button color="danger" (click)="deleteItem(row)">Entfernen</button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

【讨论】：