html - 在 Angular 10 中滑动以删除

Question

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

请看下面的截图。

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

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

我试过以下插件：

• 垫列表触摸
• 滑动角度列表

但是在子模块中导入并在组件功能中使用时它将不起作用。提前致谢。

标签： htmlangularangular-materialscss-lint

Answer 1

您可以使用 Angular 材质拖放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);
}