Ionic ItemSliding with ion-row 循环

Question

<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>

问题：当我有多行时，我尝试滑动其中一行，但它会随之滑动所有行，而不是只将操作按钮留给滑动的行，该按钮显示为一个大按钮所有行的左边。

Answer 1

您需要制作多个离子项目滑动元素，而不是在一个离子项目滑动元素中制作多行。

<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>

Ionic ItemSliding with ion-row 循环

Ionic ItemSliding with ion-row loop

row

slide

ionic3