单击按钮时打开所有 Ion Item Sliding答案

【问题标题】：Opens all Ion Item Sliding when clicked a button单击按钮时打开所有 Ion Item Sliding
【发布时间】：2021-02-23 03:03:25
【问题描述】：

根据屏幕截图附件，当我触发 div 中的编辑按钮时，我希望所有滑动的离子项目一起打开，

目前它只滑出第一个删除的离子项目，其他的保持未打开。

这是我的代码

HTML

  <div class="editcontainer1" (click)="trigger()">Edit</div>

 <ion-item-group *ngFor="let p of cart" #myItemsId > 

    <ion-item-sliding  #slidingItem  lines="none">

      <div class="maincontainer">
        <ion-item>
        </ion-item>


        <ion-item-options side="end">
          <ion-item-option color="danger" 
     (click)="removeCartItem(p)">
            <div style="color: seashell;">Delete</div>
          </ion-item-option>
        </ion-item-options>
      </div>

    </ion-item-sliding>
  </ion-item-group>

trigger() {
  this.itemSlidingList.open('end');
}
else {
  this.itemSlidingList.close();
}

如何修改成为opens all？

 openAllSlides(item) {
let a = Array.prototype.slice.call(item.el.children)
a.map((val) => {
  val.open();
})
 }

谢谢。

截图

【问题讨论】：

标签： javascript ionic-framework ion-item

【解决方案1】：

你可以这样做：

    <ion-list>
            <ion-item-group #myItemsId>  <!-- use ITEM id for group  -->
                <ion-item-sliding *ngFor="let item of items">
                    <ion-item>
                      <ion-label>Item Options</ion-label>
                    </ion-item>
                    <ion-item-options side="end">
                      <ion-item-option >Unread</ion-item-option>
                    </ion-item-options>         
                </ion-item-sliding>
            </ion-item-group>
        </ion-list>
<ion-button (click)="openAllSlides(myItemsId)">open all slides</ion-button>

.ts

openAllSlides(item){
      let a = Array.prototype.slice.call( item.el.children )
      a.map((val)=>{
        val.open();
      })
  }

【讨论】：

嗨，Najam，非常感谢，我试一试，但我有一个问题，我需要在 div 上添加离子列表吗？ item.el.children 是什么意思？
第一个：其实没必要加ion-list。第二：item.el.children 都是你要滑动的子元素。基本上这些是ion-item-sliding。如您所见，我将所有物品都包裹在ion-item-group 中，所以这些都是滑动物品。
注意到并感谢您的回复，我使用您的代码尝试了几次但它没有触发并且它出现了 item.el.children 的错误
删除

以上是我的 HTML 代码，这里是我的 TS openAllSlides(item){ let a = Array.prototype.slice.call( item.el.children ) a.map((val) =>{ val.open('end'); }) }

在您的问题中添加您的实际 html 以便更好地理解。所以我会相应地回答。