ng-zorro
文章平均质量分 54
蒲公英
前端小白晋级中……
展开
-
给nzContent引入外来的HTML模板
声明:这里的nzContent是NG-ZORRO of angular 的Modal对话框里的内容修改下图中,红框标注的位置。官网是用反引符引入的HTML代码,但是,我们要是使用负责的样式呢?1、绑定简单的数据// name = 小明<b style="color: red;">${name}</b>2、绑定复杂的数据1、在HTML页面写结构2、在ts里写逻辑3、绑定到nzContent里代码:// 引入ViewChildimport { ViewChil原创 2022-02-24 17:29:48 · 1306 阅读 · 0 评论 -
ant desigh of angular:让nz-tree-select与nz-tree的值保持一致
需求:如图:说明:1、nz-tree-select与nz-tree用的是同一个树数据。2、zorro的10版本html代码<nz-tree-select style="width: 100%" [(ngModel)]="selectNodesValue" [nzNodes]="nodes" (ngModelChange)="onChange($event)" nzShowSearch nzPlaceHolder="选择测站" [nzAllowClear]=fals原创 2022-01-04 10:44:26 · 1235 阅读 · 0 评论 -
ng-zorro中树(nz-tree)的拖拽
zorro的11版本angular11版本使用场景:把已经组织好的菜单设置为可以拖拽排序。使用tree来完成这个功能方法思路:1、选择正确的组件示例与方法2、对拖拽前行为进行判断,不合法的拖拽进行阻止3、对获取的数据进行处理,方便传给后端先分步实现,下面有完整代码1、选择正确的组件示例与方法使用这两个tree示例(结合使用)提示:第一个示例,无论调不调接口,都能完成视觉上的拖拽,并获得拖拽前后的数据。第二个示例,拖拽前校验,不符合条件的,阻止拖拽。这里两个合用是的效果就是:满足条件原创 2021-12-22 21:10:32 · 1362 阅读 · 0 评论 -
error:MdInputContainer.html:1 ERROR Error: Found the synthetic property @transitionMessages……
我在angular里使用select时出现的这个问题,试了很多解决办法。最后,才发现解决问题好简单,哭……出现这个错误是项目使用了动态,而我们没有引入动态这个包,添加代码如下:在app.module.ts里引入:import { BrowserAnimationsModule } from '@angular/platform-browser/animations';imports: [...原创 2020-04-26 10:48:18 · 383 阅读 · 1 评论 -
使用zorro—nz-table组件出现的bug
描述bug表格正常显示,点击页数为最后一页后,进行表格筛选,当筛选的结果为空时,表格应显示“暂无数据”,但是,这里除了显示“暂无数据”,还显示了之前最后一页的数据。既有数据又有“暂无数据”,肯定不行修改官网方法用这两个来解决1、表头里加上nzPageIndexChange与nzPageSize2、写逻辑nzPageSize是个变量 indexPage = 1;// 每次进行表格数据获取时,改变indexPage getSource() { this.index原创 2021-02-05 11:51:36 · 1007 阅读 · 0 评论 -
error:ngModel cannot be used to register form controls with a parent formGroup directive……
场景:写angular2项目,使用Zorro组件库。使用zorro里的表单组件,使用了[(ngModel)] 双向绑定,报了这个错。修改:按提示改改之前:改之后:原创 2020-10-13 16:07:19 · 543 阅读 · 0 评论 -
关于NG-ZORRO的历史
一直在使用NG-ZORRO,但一直没有了解过它的历史,今天了解了一些,记录一下,毕竟好记性不如烂笔头。关于NG-ZORROAngular 的组件库 ng-zorroNG-ZORRO是 Ant Design 的 Angular 实现,开发和服务于企业级后台产品。Ant Design作为一门设计语言面世,经历过多年的迭代和积累,它对UI的设计思想已经成为一套事实标准,受到众多前端开发者及企业的追捧和喜爱,也是React开发者手中的神兵利器。今天,NG-ZORRO正式开源,希望它能够让Angular开发原创 2020-07-23 10:17:06 · 957 阅读 · 0 评论 -
用时间选择器时,获取当前时间,并把当前时间作为参数放在url里,进行请求
我用的是angular cil,组件库是NG-ZORRO引用Zorro里的时间选择器:链接我感觉我的很low,以后还会改进在新建组件a里(我这里用组件是为了方便演示),注意:引用NG-ZORRO的时间选择器组件时,有引入条件a.html<nz-date-picker [(ngModel)]="date" (ngModelChange)="onChange($event)"&g...原创 2020-03-18 14:35:04 · 732 阅读 · 0 评论 -
Checkbox选中变化时回调函数
遇到一个关于Checkbox的bug,记录一下用的是Ant Design of Angular的表单、对话框对话框中添加表单,表单下方有个Checkbox,形如下图,当点击Checkbox时,我需要一个反馈,我使用了ngModelChange,来监听事件,但没有反应我当时的代码(有错的):<nz-form-item> <nz-form-control [nzSpan]="8" [nzOffset]="4"> <label nz-checkbox name=原创 2020-07-14 14:03:13 · 1263 阅读 · 0 评论 -
带有“年月日时分秒”的时间选择器
效果:说明:我用的是Ant Design of Angular组件库,我的项目使用是Angular CLI 9.0.7。效果是这个组件库里的效果,我在这里想说的是:使用过程中遇见的bug1、官网实例地址:https://ng.ant.design/components/date-picker/zh算了,copy一份吧import { Component } from '@angular/core';import differenceInCalendarDays from 'date-fns/原创 2020-07-13 17:47:27 · 1673 阅读 · 0 评论 -
zorro of angular ----表格多选
这个就是官网上(9.3.0版本)的这个效果:官网代码import { Component, OnInit } from '@angular/core';interface ItemData { id: number; name: string; age: number; address: string;}@Component({ selector: 'nz-demo-table-row-selection-custom', template: ` <nz原创 2021-03-09 15:29:25 · 431 阅读 · 0 评论 -
zorro---table的选择
样式我这里使用的是:zorro的10.2.2版本原官网代码:import { Component, OnInit } from '@angular/core';interface ItemData { id: number; name: string; age: number; address: string;}@Component({ selector: 'nz-demo-table-row-selection-custom', template: `原创 2021-01-29 15:50:38 · 754 阅读 · 0 评论 -
zorro的树-tree
前提在zorro里有三类tree(随着zorro的更新,可能会更多)1、TreeSelect 树选择2、Tree 树形控件3、Tree View 树视图使用起来大差不差之前有对 tree树形控件 做详细使用过程地址:https://blog.csdn.net/weixin_45158253/article/details/109115843这里是写我在项目里的使用tree的思路,方便以后过来拿代码项目结果展示实现1、树形控件的显示<nz-tree [nzData]="t原创 2021-01-07 15:29:30 · 875 阅读 · 1 评论 -
zorro中选择“年月日时间段”功能
看效果吧我用的是angular10,zorro是9.x代码新建组件texttext.components.html<div class="box"> <span style="margin-right: 7px;">时间类型:</span> <nz-select [(ngModel)]="valueTime" (ngModelChange)="ModelChange()" style="margin-right: 8px;">原创 2020-12-08 17:31:16 · 653 阅读 · 2 评论 -
Zorro中的Menu
zorro官网上有具体介绍,我想解释的是Menu配合路由的用法上面是官网的实例我做了一些延伸顶部导航栏像这种的要先改变css,再改变js<li nz-menu-item nzMatchRouter> <a [routerLink]="['/', 'components', 'menu', 'en']">English Menu Document</a></li>这里面的a的路径是提前在route里面定义好的,点击时,根据a的路径,匹配r原创 2020-12-07 17:56:09 · 750 阅读 · 0 评论 -
使用xlsx进行angular2的导入导出功能
写项目时,遇见了导入导出功能,感觉xlsx插件最方便,记录一下(我使用的是Zorro组件库)下载插件cnpm install xlsx --save执行命令后,确定是否下载成功(我用的版本是6.5.5,其他版本也行)在组件里使用新建组件ng g c components more把插件引入到组件在more.component.ts文件里引入import * as XLSX from 'xlsx';导出功能more.components.html文件<button nz-原创 2020-12-07 15:22:51 · 675 阅读 · 0 评论 -
Select多选
今天写这个select多选,明明很简单的功能,but,因为功能稍微有点复杂,我又粗心大意,导致我的bug不断,整个功能写完后,感觉自己咋就那么蠢呢?啊!气死了,我要反思我的是angular2项目,使用的NG-ZORRO组件库普通的select多选先了解官网的代码官网示例官网代码import { Component, OnInit } from '@angular/core';@Component({ selector: 'nz-demo-select-multiple', temp原创 2020-12-03 18:25:32 · 5785 阅读 · 0 评论 -
ng-zorro版本问题
现在,ng-zorro已经更新到10.0.2版本了,更新真是太快了在版本上,我吃了好多亏1、版本下载下载的时候注意下载的版本 ,尽量不要下载最新版本下载的时候注意下载的版本 ,尽量不要下载最新版本下载的时候注意下载的版本 ,尽量不要下载最新版本重要的事情说三遍什么叫做不要下载最近版本?// 这种方式下载的就是最新版本(默认的)cnpm i ng-zorro-antd --save下载的时候加上版本号,指定下载版本(我喜欢使用9.1.2或9.2.0版本的)cnpm i ng-zorr原创 2020-10-27 09:50:57 · 2374 阅读 · 8 评论 -
zorro的Tree树形控件操作
写angular2项目时,需要用到tree结构。测试了一部分,在这里记录下。因为官网的样式与我想要的有些出入,因此还要对官网样式做修改。达到的效果官网相关官网地址:https://ng.ant.design/components/tree/zh#api官网样式:官网代码:import { Component } from '@angular/core';import { NzFormatEmitEvent } from 'ng-zorro-antd/tree';@Component({原创 2020-10-16 15:32:00 · 3675 阅读 · 4 评论 -
使用ng-zorro里的DatePicker却一直显示英文
问题描述引入组件后,显示的是Todey,而不是“今天”,很明显,这个让人看着不舒服。修改之后:我的错误我进行了全局化的语言配置。这本没问题,but,我眼瞎。人家官方文档引入的是English,咱们需要的是中文,所以才有这个bug解决办法:官方提示:详细代码:/** 配置 angular i18n **/import { registerLocaleData } from '@angular/common';import zh from '@angular/common/loc原创 2020-09-25 13:38:42 · 627 阅读 · 0 评论 -
使用ng-zorro中表格自带的分页
效果代码html <nz-table #basicTable nzBordered [nzData]="listOfData" [nzWidthConfig]='makeName' [nzShowSizeChanger]='true' [nzShowTotal]="totalTemplate"> <thead> <tr> <th>闸门名称</th> <th>闸门型式<原创 2020-09-16 14:38:19 · 2045 阅读 · 1 评论 -
ng-zorro里的“Descriptions描述列表”使用
官方样式单列显示效果代码thml:<p class="title1">基本信息</p><nz-descriptions> <nz-descriptions-item nzTitle="工程图片" [nzSpan]="3" style="vertical-align: top;"> <div class="tu"> <img src="assets/images/1.jpg" alt=原创 2020-09-16 13:50:42 · 3338 阅读 · 0 评论 -
在angular2项目里使用ng-zorro的icon
官方链接:https://ng.ant.design/components/icon/zh#components-icon-demo-basic前提:项目里已经引入ng-zorro了先看官方基本使用:若是我们直接按他们的代码引入到我们的项目,就会报错(有时不报错)。icon引入步骤这些是写在app.module.ts里的看官方引入步骤这里我使用的是静态引入。// 引入icon图标(部分引入)import { IconDefinition } from '@ant-design/icon原创 2020-09-11 17:59:30 · 911 阅读 · 0 评论 -
error:Can‘t bind to ‘formGroup‘ since it isn‘t a known property of ‘form‘
angular项目使用ng-zorro的form时报错了问题原因:没有导入表单模块 FormsModule。解决办法:从@angular/forms中导入ReactiveFormsModule模块。import { FormsModule, ReactiveFormsModule } from '@angular/forms'; imports: [ BrowserModule, AppRoutingModule, FormsModule, Reacti原创 2020-09-03 10:18:45 · 288 阅读 · 0 评论 -
angular2项目里使用 Spin(加载中)
何时使用页面局部处于等待异步数据或正在渲染过程时,合适的加载动效会有效缓解用户的焦虑。效果ng-zorro官方链接:https://ng.ant.design/components/spin/zh上图是靠按钮来决定spin的显示与隐藏,但在我们项目里,却是要根据请求时间来决定spin的显示与隐藏,下面是我在项目里使用spin的过程1、html引入 // nzTip="Loading 是自定义加载时的名字 <nz-spin [nzSpinning]="isSpinning"原创 2020-08-06 14:12:18 · 1935 阅读 · 0 评论 -
ng-zorro 里的skeleton(骨架屏)
我是在用angular-cil写项目时,需要用到骨架屏,初步是这样写的,以后继续深化链接:https://ng.ant.design/components/skeleton/zh在项目里引入骨架屏组件之间后,开始使用,我看的是‘包含子组件’这个例子。具体如下:事例html里:<div class="article"> <nz-skeleton [nzLoad...原创 2020-03-31 10:41:17 · 691 阅读 · 0 评论 -
在angular2项目里引入ng-zorro组件库
在angular项目引入Zorro组件时的踩坑官网指导踩坑1、 官网指导分为三种方式,正常情况下,就是从头开始,即自觉走第一种引入方式(入坑),看下方的图片当你走到ng add ng-zorro-antd时,出现的错误是:让你使用npm下载当你用npm下载玩了后,继续走教程,还会报错,此时说你的npm有问题这个问题是node_modules文件引起的,需要删除,但删除需要管理员权限...原创 2020-03-05 12:02:18 · 1851 阅读 · 1 评论 -
Angular2使用ng-zorro组件库的表格组件,让里面的“暂无数据”隐藏
使用NG-ZERO组件制作表格时,nz-table表格会有自带的"暂无数据",怎么让它隐藏?就是这样的表格下面会多出一行暂无数据这样的图表想把它去掉的话只需要加上[[nzData]="[{}]"],让nzData属性为空就可以 <nz-table #borderedTable nzBordered [nzData]="[{}]"> ...原创 2020-03-18 10:39:33 · 1931 阅读 · 0 评论 -
ng-zorro组件库里使对话框Modal的确认取消按钮隐藏
写“查看”功能时,不想要这两个按钮添加[nzFooter]=null就行 <nz-modal id="see" [(nzVisible)]="isVisible" nzTitle="标题" (nzOnCancel)="handleCancel()" [nzFooter]=null style="width:80%" >……</nz-modal>(nzOnC...原创 2020-03-27 13:21:40 · 1770 阅读 · 0 评论 -
让ng-zorro组件库里表格的“分页”隐藏
加上[nzShowPagination]='false'就行 <nz-table #borderedTable nzBordered [nzShowPagination]='false' [nzData]="[{}]" >……</nz-table>原创 2020-03-28 09:50:00 · 1265 阅读 · 1 评论 -
angular2中,select、option,设置默认选中与获得选中项id
在angular里,引入下拉框:(我用的ng-zorro组件库)<nz-select [(ngModel)]="selectedValue" nzPlaceHolder="Choose" style="width:300px;"> <nz-option id="nzoption" *ngFor="let option of selectedValueL...原创 2020-03-31 16:01:43 · 4254 阅读 · 0 评论 -
angular2项目里使用ng-zorro的分页组件(不是表格自带的那种)
前提:我使用的是angular-cil做的项目组件库用的是ng-zorro实现的效果是:显示总条数、可跳转到其他页(两个按钮同样有效)、可改变每页条数具体步骤如下:1、使表格的分页隐藏,避免重复(我用的使表格,你们可以使用其他的,这一步可省略)主要是:[nzShowPagination]='false'<nz-table #borderedTable nzBordere...原创 2020-04-01 10:50:47 · 2542 阅读 · 1 评论 -
angular2大屏项目
前两天写了一个大屏项目,用angular-cil和antd写的,遇到很多问题,记下笔记1、大屏的分辨率是以自己电脑分辨率为标准,宽高都写死了2、“大屏显示”不是“窗口显示”,以谷歌为例的大屏调试3、大屏上显示的时间是实时的,每秒的变化都是动着的。与倒计时的效果一样,代码示例:setInterval(() => { const time1 = new Date();...原创 2020-04-22 17:48:41 · 1371 阅读 · 1 评论 -
angular2接口查询后渲染到表格
我记的笔记,可能有不对的1、在service里写接口请求(planser.service.ts)get请求:// 获取表格信息 getinfo(supplementId, year, maxResultCount, skipCount) { return this.http.get<string>(`${apiUrl}/ProjectInfo/GetProInfoManagementInfos`, { headers: { authorization:原创 2020-06-01 10:15:43 · 933 阅读 · 0 评论 -
修改ng-zorro中table对齐及宽度等细节
在angular项目里使用antd组件库的table组件1、改变对齐方式::ng-deep th, td { text-align: center; }2、修改宽度代码: <th [nzWidth]="'10%'">年份</th> <th [nzWidth]="'10%'">ccc</th> <th [nzWidth]="'400px'"原创 2020-06-03 10:59:07 · 3392 阅读 · 2 评论 -
angular2修改按钮的接口(功能)实现
轮廓:点击修改,弹出对话框,对话框里显示表单,当前项的信息已经渲染到表单里了。修改数据信息后,点击确认按钮,执行修改功能,同时关闭对话框,列表自动更新。1、点击编辑(修改)后有弹框出现组件参考:https://ng.ant.design/components/modal/zhhtml逻辑:<a (click)="showModal2(data.id)">编辑</a> <!-- 编辑的弹框模板 --> <nz-modal [(nzVisible原创 2020-06-01 10:37:18 · 353 阅读 · 0 评论 -
angular2项目中使用ng-zorro日历组件
需要的结果:后台返回的数据:antd里要的数据结构:很明显,我们要对数据进行处理才能符合要求,接下来进行详解:1、选择antd中符合要求的模板这里选择这个:2、应用到项目里 <nz-calendar [(ngModel)]="date" (nzSelectChange)="selectChange($event)">一会统一放完整代码3、请求后台数据,并处理数据4、渲染到日历模板里5、代码5.1、ts的代码export class DaycheckCompon原创 2020-07-02 10:18:17 · 1750 阅读 · 5 评论 -
ng-zorro中的Switch开关
我在angular项目里要使用Switch开关,第一次使用antd里的开关,记录下:效果:后台返回的数据:看isUpload,如果返回true,就是上报。返回false,就是不上报。根据true和false来决定开关的走向代码实现:1、引入antd步骤:https://ng.ant.design/docs/getting-started/zh2、使用// <nz-switch [ngModel]="你的数据" nzCheckedChildren="是" nzUnCheckedCh原创 2020-07-03 09:55:09 · 2486 阅读 · 0 评论 -
ng-zorro中Modal对话框细节操作
很多时候,官网给的模板不适合我们的需求,这里是我对官网对话框的样式修改官网样式:1、修改宽度具体代码:import { Component } from '@angular/core'; <button nz-button [nzType]="'primary'" (click)="showModal()"><span>Show Modal</span></button> // 只加nzWidth属性,其他不变 <原创 2020-07-13 10:13:58 · 6978 阅读 · 1 评论 -
修改ng-zorro中table的宽度
之前修改ng-zorro中的表格宽度都是用[nzWidth]来修改,但[nzWidth]是用在th上的,有时我们不用th,直接用td了,这时就不好修改了。故,介绍另一种方法:[nzWidthConfig]官方介绍具体网站:https://ng.ant.design/components/table/zh#api具体例子html:<nz-table nzTemplateMode nzBordered [nzWidthConfig]=tab3> <thead>原创 2020-07-30 17:07:03 · 2803 阅读 · 0 评论