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有提示报错
在这上面,踩过一些坑,花了一点时间