gpt4 book ai didi

html - 在 Angular 10 中滑动删除

转载 作者:行者123 更新时间:2023-12-05 04:46:59 25 4
gpt4 key购买 nike

你好我的开发伙伴。我只想寻求帮助,以便在我们的 Angular 项目中实现滑动删除功能。

请看下面的截图。

enter image description here

这是为我提供的使用该功能的代码。

      <div class="col-md-6 col-sm-6 col-xs-12" *ngFor="let relation of bookList" >
<div class="" (click)="selectBookFor(relation)">
<div class="">
<div class="row introMain-wrapper">
<div class="col-auto">
<div class="introImg">
<img src="{{ relation && relation.image }}" alt="user" (error)="setDefaultRelationUserPic($event, relation?.gender)">
</div>
</div>
<div class="col">
<div class="row">
<div class="col"><h5 class="card-title text">{{relation?.firstName}} {{relation?.lastName}}</h5></div>
<div class="col-auto"><span class="relation-text">{{relation?.relationship}}</span></div>
</div>
<h5 class="card-text">{{relation?.email}}</h5>
<div class="outerdiv-text">
<span class="card-text">{{relation?.phone1}}</span>
</div>
</div>
</div>
<div class="line"></div>
</div>
</div>
</div>

我试过以下插件:

  • 垫列表触摸
  • 滑动 Angular 列表

但是在子模块中导入并在组件功能中使用时它不会起作用。在此先感谢。

最佳答案

您可以使用 Angular Material 拖放 https://material.angular.io/cdk/drag-drop/examples

由此,您可以创建滑动删除选项。

演示

<div class="container">
<div class="row">
<div
cdkDropList
cdkDropListSortingDisabled
[cdkDropListData]="bookList"
class="example-list"
(cdkDropListDropped)="drop($event)">
<div class="example-box" *ngFor="let item of bookList;let i= index" cdkDrag>{{item.firstName}}</div>
</div>
</div>
</div>

TS

drop(event: CdkDragDrop<any, any>): any {
this.bookList.splice(event.currentIndex, 1);
}

关于html - 在 Angular 10 中滑动删除,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68654901/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com