st 表格

动态渲染

@ViewChild('st', { static: false }) st: STComponent;
columns: STColumn[] = [
......
this.columns[0].type = "checkbox";
...

使用拖动排序

本来说是使用ng-alain，但其实拖动这个是ng-zorro里的。

官网链接：https://ng.ant.design/components/table/zh#components-table-demo-drag-sorting

首先要先引入模块，在ng-alain中，需要在share.module.ts中imports和exports模块。

import { DragDropModule } from '@angular/cdk/drag-drop';@NgModule({imports: [...DragDropModule,...],exports: [...DragDropModule,...]
})

html：

<nz-table #editRowTable nzBordered [nzData]="dataList4Detail"><thead><tr><th>编码</th><th>名称</th><th>顺序号</th><th></th></tr></thead><tbody cdkDropList (cdkDropListDropped)="drop($event)"><tr *ngFor="let data of dataList4Detail" class="editable-row" cdkDrag><td>{{ data.code }}</td><td>{{ data.name }}</td><td>{{ data.orders }}</td><td><inz-popconfirmnzPopconfirmTitle="确认删除此条数据？"nzPopconfirmPlacement="top"(nzOnConfirm)="confirm(data)"style="cursor: pointer;"nz-iconnzType="delete"nzTheme="outline"></i></td></tr></tbody>
</nz-table>

ts：

import { moveItemInArray, CdkDragDrop } from '@angular/cdk/drag-drop';drop(event: CdkDragDrop<string[]>): void {moveItemInArray(this.dataList4Detail, event.previousIndex, event.currentIndex);this.getOrders();
}getOrders() {let i = 1;this.dataList4Detail.forEach(e => {e.orders = i;i++;})
}

代码可实现拖拽排序，并更改排序号。

数据显示

使用动态url作为数据源

数据源可以是静态和动态的，动态源时，可能需要 reName 参数。例如我这里后台使用的是 springboot JPA ，就需要将参数重新命名。

<st#st[data]="url"[columns]="columns"[req]="{ reName: { pi: 'page', ps: 'size' }, method: 'POST' }"[size]="'small'"[res]="{ reName: { list: 'content', total: 'totalElements' } }"[page]="{ showQuickJumper: true, showSize: true }"></st>

这里的 req、res 也可以在 ts 中定义个变量，再绑定到页面。

绑定dataList

有时，也有需求不能直接通过 url 绑定获取数据，而是绑定一个静态的数据源，这时也需要修改参数。后台是 springbootJPA ，例子如下。

代码中不只有 st ，还有一个搜索用的 sf 。

<sf #sf mode="search" [schema]="searchSchema" [ui]="ui" (formSubmit)="search($event)" (formReset)="st.reset($event)"></sf>
<stsize="small"bordered#st[data]="page.content"[total]="page.totalElements"[ps]="page.size"[pi]="page.number + 1" [columns]="columns"[page]="{ front: false, zeroIndexed: true, showQuickJumper: true, showSize: true }"(change)="onChecked($event)"[loading]="dataLoading"
>
</st>

url = `/findAll`;
dataLoading = false;
page: any = {};onChecked(item) {if (item.type === "pi" || item.type === 'ps') {let tmp = {};if (this.sf.value !== null) {tmp = this.sf.value;}this.getData(tmp, { page: item.pi, size: item.ps })}
}getData(value, pageable) {this.dataLoading = true;let params: any = {};let url = this.url;if (pageable !== null) {url = url + "?page=" + pageable.page + "&size=" + pageable.size;}if (value !== null) {params = value;}// console.log("url:%o, params: %o", url, params);this.http.post(url, params).subscribe(res => {this.page = res;this.dataLoading = false;});
}

控制字段显示隐藏

有时需要根据状态来隐藏删除或修改链接，这时可以用iif进行控制。iifBehavior有disabled和none属性，顾名思义一个就是不能被点击，一个就是页面不渲染。

{text: '删除',type: 'del',popTitle: "确认删除此条数据？",click: (item: any) => this.remove(item),iif: item => (item.status === 3 || item.status === 0),iifBehavior: 'disabled'
}

状态值显示

状态在数据库中是数值，在页面上要显示字符串。

{title: '申请状态', index: 'status', type: 'badge', badge: {'0': { text: '已保存', color: 'default' },'1': { text: '待审核', color: 'warning' },'2': { text: '已通过', color: 'success' },'3': { text: '已驳回', color: 'error' },'4': { text: '已冲销', color: 'success' }}
},

这种是文本和前面带一个不同颜色的小圆点。除此之外，还有很多其他的示例。https://ng-alain.com/components/st/zh#components-st-type

支持十种不同列类型：行号、多选、单选、徽标、标签、图片、数字、货币、日期、布尔徽章、枚举。也可以使用自定义列完成更复杂渲染。

数据预处理

在 ts 文件中定义预处理函数，在 html 页面中绑定函数。

<st#st[data]="url"[columns]="columns"[req]="{ reName: { pi: 'page', ps: 'size' }, method: 'POST' }"[size]="'small'"[res]="{ reName: { list: 'content', total: 'totalElements' }, process: processData }"[page]="{ showQuickJumper: true, showSize: true }"(change)="onChecked($event)"
></st>

processData(data: STData[]) {return data.map((i: STData, index: number) => {i.disabled = i.applyStatus === 2;return i;});}

sf 动态表单

动态渲染

@ViewChild('sf', { static: false }) sf: SFComponent;
searchSchema: SFSchema = {......
this.searchSchema.properties.productId.enum = dataList;
...

添加按钮

比如要实现一个效果：

这个输入框旁边的按钮怎么写啊？

一开始对这个框架不熟悉，走了一些弯路。

毕竟乍一看文档，根本没有按钮这个控件啊。当然我去用ng-zorro写，那肯定能写出来，但我是不想敲html所以才用ng-alain的啊。

但其实在ng-alain里面，用个custom就好了。也可以写个自定义小部件。

sf中custom官网链接：https://ng-alain.com/form/custom/zh

贴代码吧，也没啥好说的。

html：

<sf *ngIf="i" #sf mode="edit" [schema]="schema" [ui]="ui" [formData]="i" button="none"><ng-template sf-template="orderId" let-me let-ui="ui" let-schema="schema"><inputtype="text"readonlynz-input[attr.id]="me.id"[disabled]="me.disabled"[attr.disabled]="me.disabled"[nzSize]="ui.size"[ngModel]="order.code"style="width: 160px;"/><button nz-button nzType="primary" style="margin-left: 5px;" nzSize="small" (click)="chooseOrder()"><i nz-icon nzType="search" nzTheme="outline"></i></button></ng-template><div class="modal-footer"><button nz-button type="submit" nzType="primary" (click)="save(sf.value)" [nzLoading]="http.loading">保存</button><button nz-button type="button" (click)="close()">关闭</button></div></sf>

ts：

@ViewChild('sf', { static: false }) sf: SFComponent;schema: SFSchema = {properties: {...orderId: { type: 'string', title: '选择单据', },...},required: [''],};ui: SFUISchema = {'*': {spanLabelFixed: 100,grid: { span: 8 },},...$orderId: {widget: 'custom',},};

注：

html中 sf-template="orderId" 的 orderId 与ts中properties的 orderId 相对应。
orderId的 ui 为 widget: 'custom'

但是这样写有个小问题，不知道是不是版本原因。当我用 custom 写完按钮，控件的验证不起作用。一般 sf 如果想要非空验证，加入 required 数组中就好了，用完 custom ，加入了也没能验证。

isvisible

ui: {widget: 'select',width: 210,visibleIf: { xxx: (value: any) => value === 1 },
}

这里的xxx，通常是另外一个属性。

回调时修改表单值

例如在这里，两个下拉框做联动。需要根据父类从后台取出子类数据，再刷新页面。

onChangeCategory(value: any) {const formdata = this.sf.value;this.http.post(`/findProjectCategoryByRoot`, value).subscribe((res: any) => {const enums = [];for (const entry of res) {enums.push({ label: entry.name, value: entry.id });}this.searchSchema.properties.categoryChildId.enum = enums;this.searchSchema.properties.categoryId.default = value;this.searchSchema.properties.status.default = formdata.status;this.sf.refreshSchema();});}

g2 图表

首先要安装g2插件：

# add
ng g ng-alain:plugin g2
# remove
ng g ng-alain:plugin g2 -t=remove

然后在app->shared->shared.module.ts文件中添加chart module

import { DelonChartModule } from '@delon/chart';
@NgModule({imports: [...DelonChartModule,...],exports: [...DelonChartModule,...]
})

文件上传下载

上传可以使用ng-alain的，也可以用ng-zorro的。

ng-alain需要使用sf，这里是ng-zorro的写法：

 <nz-uploadnzAction="/upload"[nzHeaders]="{ authorization: 'authorization-text' }"(nzChange)="upload($event)"style="display: inline-block; margin-right: 10px;"[nzShowUploadList]="false"><button nz-button><i nz-icon nzType="upload"></i>上传</button></nz-upload>

upload(info: UploadChangeParam): void {if (info.file.status !== 'uploading') {console.log(info.file, info.fileList);}if (info.file.status === 'done') {if (info.file.response.error === 0) {this.msgSrv.error(`${info.file.name} 文件上传失败`);this.msgSrv.error(info.file.response.msg); // 不支持此文件类型} else {this.msgSrv.success(`${info.file.name} 文件上传成功`);this.getDataList();}} else if (info.file.status === 'error') {this.msgSrv.error(`${info.file.name} file upload failed.`);}}

ng-alain有提供一个下载的控件，还是很好用的。

<buttonnz-buttonclass="mr-sm"down-file[http-data]="data"http-url="/download?fileId={{ data.id }}"[file-name]="data.fileName"
>下载
</button>

参考链接

ng-alain空项目中引入@delon/chart-图表

[Angular] ng-alain的一些实践相关推荐

Angular 中后台前端解决方案 - Ng Alain 介绍
Angular 中后台前端解决方案 - Ng Alain 介绍参考文章: (1)Angular 中后台前端解决方案 - Ng Alain 介绍 (2)https://www.cnblogs.com/ ...
angular项目集成ng zorro 和ng alain
angular项目集成 ng zorro和ng alain(mock 和acl权限)学习笔记这段时间,比较忙,很久没有写博客了.作为后端开发人员,第一次接触angular,以下是个人的学习心得和D ...
Angular在洋葱圈的实践与思考
体育社区"洋葱圈"的前端负责人游志军,近日在UPYUN Open Talk第十期专场活动中,分享了Angular在洋葱圈的实践与思考.主要内容包括: 为什么选择 Angular: ...
angular 最佳实践_干净高效的Angular应用程序的最佳实践
angular 最佳实践 by Vamsi Vempati 由Vamsi Vempati 干净高效的Angular应用程序的最佳实践 (Best practices for a clean and p ...
angular蚂蚁_Angular 中后台前端解决方案 - Ng Alain 介绍
背景之前项目使用过vue.js+iview,习惯了后端开发的我,总觉得使用不习惯,之前分析易企秀前端代码,接触到了angular js,完备的相关功能,类似后端开发的体验,让人耳目一新,全新的ang ...
ng-alain php,Angular 中后台前端解决方案 - Ng Alain 介绍
背景之前项目使用过vue.js+iview,习惯了后端开发的我,总觉得使用不习惯,之前分析易企秀前端代码,接触到了angular js,完备的相关功能,类似后端开发的体验,让人耳目一新,全新的ang ...
ng alain的简单使用
1.创建一个空 angular 项目 ng new demo --style less 2.添加 ng-alain 脚手架 ng add ng-alain 3.运行项目 ng serve -o ...
angular ng lint 相关
首先还是要来讲一讲 ng lint 的相关知识: 通过Angular CLI的执行语句 **ng new XXX** 创建新项目后,目录中会包含一个tslint.json文件,这个文件就是用来定义一个 ...
Angular: ‘ng’ is not recognized as an internal or external command, operable program or batch file
今天,安装好 Angular CLI 框架后出现无法识别 ng 命令的情况.在网上搜了一些解决方案进行尝试后解决了这个问题.这里我将解决方案进行了整理,希望对看到这篇文章的小伙伴有所帮助. 问题描述 ...
angular ng zorro框架日期框无法自适应宽度的解决方法
如果我们使用ng zorro框架的日期框时,就会发现,日期框的宽度总是固定的,无法像输入框一样自适应父节点<nz-form-control [nzSpan]="12"> ...

[Angular] ng-alain的一些实践

st 表格

动态渲染

使用拖动排序

数据显示

使用动态url作为数据源

绑定dataList

控制字段显示隐藏

状态值显示

数据预处理

sf 动态表单

动态渲染

添加按钮

isvisible

回调时修改表单值

g2 图表

文件上传下载

[Angular] ng-alain的一些实践相关推荐

最新文章

热门文章