Angular引入ant.desigin的Transfer穿梭框和轮播图carousel，【更新】穿梭框数据大表格渲染支持搜索

百事可口

已于 2023-03-08 18:50:26 修改

阅读量929

点赞数 1

分类专栏： angular ant 文章标签： angular.js typescript javascript

于 2022-08-09 14:56:24 首次发布

本文链接：https://blog.csdn.net/qq_38594056/article/details/126247007

版权

angular 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

ant

2 篇文章 0 订阅

订阅专栏

Angular引入ant.desigin的Transfer穿梭框和轮播图

引入穿梭框

xxxx表示随意的文件名

首先在xxxx.module.ts文件中，引入对应模块’

import { NzTransferModule } from 'ng-zorro-antd/transfer';

@NgModule({
    imports: [
   		// ...省略
        NzTransferModule,
    ],
    declarations: [earnumberDetailComponent],
    providers: [BackupBatchSettingService],
})
export class BackupBatchSettingModule { }

接着在对应的业务组件里 xxxx.component.ts

引入后在class里面定义该列表，并定义其刚刚引入的类型

import { TransferItem } from 'ng-zorro-antd/transfer';

export class earnumberDetailComponent {
    transferList: TransferItem[] = []; //当前穿梭框列表
}

ant.desigin是根据列表内的direction字段去区分当前数据在左侧还是右侧，值为left在左侧，right在右侧。
注意的是列表页面请求回来之后，需要手动赋值一下

    /**
     * 获取当前xxxx列表 弹窗
     */
    init(): Promise<number> {
        return new Promise((reslove) => {
            this.service.getBackupFileOData([
                ['InState', '=', 2],
            ]).load().then((res) => {
                res.forEach(item => {
                    item.direction = 'left' //该字段用于控制 穿梭框在左侧还是右侧
                })
                this.transferList = res
                reslove(1)
            })
        })
    }

在对应的业务组件里 xxxx.component.html

<nz-transfer class="nx_transfer" 
   [nzTitles]="['选择耳号', '已选择耳号']" 
   [nzDataSource]="transferList"
   [nzDisabled]="disabled" 
   nzShowSearch 
   [nzFilterOption]="filterOption" 
   (nzSearchChange)="search($event)"
   (nzSelectChange)="select($event)" 
   (nzChange)="change($event)" 
   nzSearchPlaceholder="请输入耳号/品种/批次进行搜索"
   [nzListStyle]="{ 'width.px': 350, 'height.px': 435 }" 
   [nzRender]="render"
   >
	<ng-template #render let-item>
	    <span class="nx_transfer_showText">{{ item.EarNumber }}</span>
	    <span>{{ item.VarietiesName }}</span>
	</ng-template>
</nz-transfer>

对应的事件

其中搜索 filterOption 是前端做的过滤
change这里我有一个业务需求，表格内进行选择穿梭框，当前已经选择的，去其他行，数据需要过滤掉，所以这里我用new set 去处理

    /*** 当前列表已经选择的数据*/
    nowSelectList = new Set()
    // -------------  上面为伪代码，nowSelectList 为当前class的变量 ----------------
   filterOption(inputValue: string, item: any) {
        return item.EarNumber.indexOf(inputValue) > -1 ||
            item.VarietiesName.indexOf(inputValue) > -1
    }
    search(ret: {}): void {
        // console.log('nzSearchChange', ret);
    }
    select(ret: {}): void {
        // console.log('nzSelectChange', ret);
    }
    change(ret: any = {}): void {
        //右侧去 就push
        if (ret.to == "right") {
            ret.list.forEach((item) => {
                this.nowSelectList.add(item.PigID)
            })
        } else if (ret.to == "left") {
            ret.list.forEach((item) => {
                this.nowSelectList.delete(item.PigID)
            })
        }
    }

	// 业务代码，主要作用是控制弹窗显示后，过滤掉其他行已经选择（去右侧的数据）
    poupShow(data){
          this.transferNumberOrderDetail = data
          //过滤掉当前已选择的数据,但是如果该列表下已选择的(去右侧的)当然要显示出来了
          let _filterList = data.transferList.filter((item) => {
              if (!this.nowSelectList.has(item.PigID)) {
                  return item
              } else if (item.direction == 'right') {
                  return item
              }
          })
          this.transferList = _filterList
          this.poupVisible = true;
    }

页面效果截图

在这里插入图片描述

引入轮播图

轮播图就比较简单了官网有对应的案例，这里只做简单的记录

xxxx表示随意的文件名

首先在xxxx.module.ts文件中，引入对应模块’

import { NzCarouselModule } from 'ng-zorro-antd/carousel';
import { NzIconModule } from 'ng-zorro-antd/icon';

@NgModule({
    imports: [
   		// ...省略
        NzCarouselModule ,
        NzIconModule ,
    ],
    declarations: [earnumberDetailComponent],
    providers: [BackupBatchSettingService],
})
export class BackupBatchSettingModule { }

在对应的业务组件里 xxxx.component.html

<nz-carousel 
	id="carousel" 
	(nzBeforeChange)="nzBeforeChange($event)" 
	#carousel 
	class="nx-nz-carousel"
	nzEffect="scrollx"
   >
   <div class="item_box" nz-carousel-content *ngFor="let item of phototUrls">
       <img class="item_img" src="{{item}}" alt="">
   </div>
</nz-carousel>
<div class="nx-btn-carousel p-left-btn partner-perv" (click)="carousel.pre()">
     <i nz-icon type="left"></i>
 </div>
 <div class="nx-btn-carousel p-right-btn partner-next" (click)="carousel.next()">
     <i nz-icon type="right"></i>
 </div>
 <div class="btm">
     <span>{{popEarNumber}}</span>
     <span>
         共<i>{{phototUrls.length}}</i>张，
         当前第<i>{{numOrder+1}}</i>张
     </span>
 </div>

接着在对应的业务组件里 xxxx.component.ts

import { TransferItem } from 'ng-zorro-antd/transfer';

export class earnumberDetailComponent {
    numOrder:number=0 //记录当前在第几张
    phototUrls=[] //接口请求回来的图片列表
    popEarNumber = ''
    @ViewChild('carousel', { static: false }) carousel;
    
    //改变事件回调 记录当前在第几张
    nzBeforeChange(e){
        this.numOrder=e.to
    }
}

页面效果如下图
在这里插入图片描述

以上就是Angular引入ant.desigin的Transfer穿梭框和轮播图carousel的全部内容，比较简单

【更新】

上面的穿梭框如果数据量大，如超过2000条+。就会造成Dom元素过多，引起页面卡顿

优化

改成表格的渲染方式并且支持搜索

简化版代码如下：

<nz-transfer [nzDataSource]="list" [nzDisabled]="disabled" [nzShowSearch]="showSearch" [nzShowSelectAll]="false"
  [nzRenderList]="[renderList, renderList]" (nzSelectChange)="select($event)" (nzChange)="change($event)">
  <ng-template #renderList let-items let-direction="direction" let-stat="stat" let-disabled="disabled"
    let-onItemSelectAll="onItemSelectAll" let-onItemSelect="onItemSelect">
    <nz-table #t [nzData]="convertItems(items)" nzSize="small">
      <thead>
        <tr>
          <th nzShowCheckbox [nzDisabled]="disabled" [nzChecked]="stat.checkAll" [nzIndeterminate]="stat.checkHalf"
            (nzCheckedChange)="onItemSelectAll($event)"></th>
          <th>Name</th>
          <th>Tag</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of t.data" (click)="onItemSelect(data)">
          <td nzShowCheckbox [nzChecked]="data.checked" [nzDisabled]="disabled || data.disabled"
            (nzCheckedChange)="onItemSelect(data)"></td>
          <td>{{ data.title }}</td>
          <td>
            {{ data.tag }}
          </td>
          <td>{{ data.description }}</td>
        </tr>
      </tbody>
    </nz-table>
  </ng-template>
</nz-transfer>

js部分

import { Component, OnInit } from '@angular/core';
import { TransferItem } from 'ng-zorro-antd/transfer';

@Component({
  selector: 'app-transfer',
  templateUrl: './transfer.component.html'
})
export class TransferComponent implements OnInit {
  list: TransferItem[] = [];
  disabled = false;
  showSearch = false;

  ngOnInit(): void {
    for (let i = 0; i < 20; i++) {
      this.list.push({
        title: `content${i + 1}`,
        description: `description of content${i + 1}`,
        disabled: i % 4 === 0,
        tag: ['cat', 'ear', 'bird'][i % 3]
      });
    }

    [2, 3].forEach(idx => (this.list[idx].direction = 'right'));
  }

  convertItems(items: TransferItem[]): TransferItem[] {
    return items.filter(i => !i.hide);
  }

  select(ret: {}): void {
    console.log('nzSelectChange', ret);
  }

  change(ret: {}): void {
    console.log('nzChange', ret);
  }
}

注意！

这里需要注意的地方是，ant的搜索是根据你写的title字段决定的，万万不可修改别的字段！！！，，还好ts有提示报错

在这上面，踩过一些坑，花了一点时间
在这里插入图片描述

百事可口

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Angular引入ant.desigin的Transfer穿梭框和轮播图carousel，【更新】穿梭框数据大表格渲染支持搜索

ant.desigin是根据列表内的direction字段去区分当前数据在左侧还是右侧，值为left在左侧，right在右侧。以上就是Angular引入ant.desigin的Transfer穿梭框和轮播图carousel的全部内容，比较简单。引入后在class里面定义该列表，并定义其刚刚引入的类型。轮播图就比较简单了官网有对应的案例，这里只做简单的记录。注意的是列表页面请求回来之后，需要手动赋值一下。...
复制链接

扫一扫