qq_36398269-CSDN博客

原创 Angular的websocket使用

一. app.component.ts里建立长连接import { WebsocketService } from "@global/shared"; constructor(private websocketService: WebsocketService) {} ngOnInit() { this.websocketService.connect(Environment....

2019-12-17 11:01:18 1097

原创前端内嵌页面以及安全URl处理

一. html里内嵌使用iframe框架内嵌页面，src里写入跳转地址<iframe [src]="userManageUrl" allowtransparency="true" frameborder="0" id="content" controls></iframe>二. URL安全跳转直接在src里传入url时，可能页面会报非安全跳转的错误，这个时候需要在...

2019-12-17 10:56:20 1554

原创 Angular管道

1. 需要使用@Pipe来装饰类2. 实现PipeTransform的transform方法，该方法接受一个输入值和一些可选参数3. 在@Pipe装饰器中指定管道的名字，这个名字就可以在模板中使用。4. 自己写管道时，在 common/pipes下建一个ts文件一. 小数管道接收的参数格式为{最少整数位数}.{最少小数位数}-{最多小数位数}其中最少整数位数默认为1最少小数位数默认为...

2019-12-17 10:42:51 524

原创格林尼治时间与本地时间的转换

一. 前端时间转换的方法：formatDate()函数的使用需要在ts中引入import { formatDate } from "@angular/common"1、 ts中的时间转换：a) 本地时间转换为格林尼治时间：date = formatDate("2018-08-11 16:52:12", "y-MM-dd'T'HH:mm:ss'Z'", "en-US", "GMT"); ...

2019-12-14 16:22:28 1521

原创 Angular树形控件的使用

1.html引入树形控件，双向绑定数据<nz-tree nzSize="default" [nzData]="nodesdataNew" nzCheckable nzMultiple [nzCheckedKeys]="defaultCheckedKeys" [nzExpandedKeys]="defaultExpandedKeys" ...

2019-12-14 16:06:44 1375

原创 Angular下载文本文档或者压缩包功能的实现

1.html里绑定下载函数 <button (click)="exportConfirm()" >下载</button>2.ts里编写下载逻辑//下载文件exportConfirm(){ //要求后端返回的内容为二进制流 let info = { responseType: 'arraybuffer'}; //请求HTTP下载 co...

2019-12-14 15:03:33 837

转载 JS 对象转换为数组

1.第一种方法：var obj = data; //定义对象（data为获取到的对象，在这里定义）var arr = Object.values(obj); //对象转化为数组console.log(arr);2.第二种方法：var obj = data; //定义对象var arr = []; //定义数组for (var i in obj) { arr.push(ob...

2019-10-31 09:46:18 345

原创 Angular过滤器逻辑处理

在html里使用过滤器组件 <nz-dropdown [nzTrig`在这里插入代码片`ger]="'hover'" > <p nz-dropdown> <i class="anticon anticon-caret-down"></i>//选中后对吼 </p> <ul nz-menu class="...

2019-10-29 19:29:03 263

原创 Angualar多选复选框逻辑处理

在html里引用多选框组件，并双向绑定数据[nzIndeterminate] ：表示未全选状态时，全选按钮的状态变化[(nzChecked)]：表示选中状态后的数据传值<tr><th nzShowCheckbox [(nzChecked)]="allChecked" [nzIndeterminate]="indeterminate" (nzCheckedChange)=...

2019-10-29 17:19:41 790

原创 Echart图表里的tooltip超出范围的处理

使用confine:'true’的属性将内容限定在范围内，为了美观，可以写一个回调函数将tooltip固定在顶部 tooltip: { trigger: 'item', formatter: "{b}: {c}GB ({d}%)", confine:'true',//限制在显示框里 // 固定在顶部 ...

2019-10-29 17:07:45 2055

原创 Echart图表formatter回调函数不起作用

整个大框架option{}，必须写成let option={}；如果写成this.option后回调函数不起作用let option = { title:{ show:true, text:'已用总容量'， }, series: [ { name:'容量状态...

2019-10-29 17:04:11 5671 1

原创 Echart饼图图例（legend）与tooltip内容不一致的以及图例过长的处理

在legend里写formatter回调函数进行内容拼接1.此处由于图例太长，同时在回调函数里写了拼接函数2.这样的写法要注意大的option{}，需要写成let option={}；如果写成this.option后回调函数不起作用 legend: { orient: 'vertical', left:'58%', top:'24...

2019-10-29 16:59:44 3208

原创 HTML传值undefined处理

1.通过?.处理异常值{{dataDetails?.name?dataDetails?.name:'--'}}2.通过！！将值转换成"false"的布尔值第一个！将异常值转逻辑上的False强制转换为布尔值true第二个！将布尔值true转换为布尔值false然后再通过条件运算符判断...

2019-10-29 16:40:09 2092

原创 Angular路由传值

1.在HTML页面绑定所需的值<span (click)="recoverJump(data)">恢复页面</span>2.在TS里编写逻辑// 恢复跳转页面recoverJump(res) { let recoverData = JSON.stringify(res); this.route.navigate(['/home/alarmManagemen...

2019-10-12 16:35:25 209

原创 git账户更换密码后，出现“HTTP Basic: Access denied”错误或者是“GIt：凭据丢失或无效”错误

1.进入控制面板——用户账户——凭据管理器——windows凭据——添加普通凭据，网址输入git:http://git.****.com，然后个人对应的账号和密码，保存即可。2.打开vscode，即可拉取推送代码。如果存在还需要手动输入账号密码的情况，可以在控制台输入以下代码，并再次推送或拉取，输入用户名和密码即可，下一次再需要拉去或推送时无需输入账号密码。git config --globa...

2019-10-02 15:35:33 2623

原创 JavaScript函数

1.trim()作用：移除头尾空格的字符串。使用方法：string.trim()var str = " Runoob ";alert(str.trim());输出结果:Runoob2.substr()方法用于添加或删除数组中的元素。作用：可在字符串中抽取从 start 下标开始的指定数目的字符。使用方法：string.substr(start,len...

2019-09-23 16:49:03 207

原创关于breadcrumb面包屑

1.面包屑作用显示当前页面在系统层级结构中的位置，并能向上返回。2.面包屑层级结构标签“nz-breadcrumb”里包含面包屑的内容标签“nz-breadcrumb-item”里包含页面各个层级里的内容，一个“nz-breadcrumb-item”包含一个层级，“nz-breadcrumb-item”的前后顺序对应层级在结构中的位置。 <nz-breadcrumb> ...

2019-09-23 15:20:08 1541

原创关于VScode切换、拉取、推送、合并分支，并解决冲突

1.切换分支输入命令“git branch -a”，查看远程分支输入命令“git checkout dev”，切换到分支dev输入命令“git status”，查看分支状态，比如是否有未保存的修改、未解决的冲突2.拉取分支git pull：拉取远程的数据同步到自己的目录的命令，前提是没有未保存的代码以及没有未解决的冲突其它拉取方法：左侧导航栏找到源代码管理，可以看到更改过的文件，在输...

2019-09-19 17:19:55 50321 2

原创 vscode导入基于Angular框架的项目以及环境搭建

1. 安装node.js在官网找到最新版本下载：官网地址：https://nodejs.org/en/安装成功后，打开vscode，打开终端，在终端里输入命令“node -v ”查看版本号，如果显示安装版本号则安装成功2. 安装yarnYarn提供了丰富的命令使你可以对Yarn包进行许多操作，包括安装、管理、发布等。上官网，选择稳定版下载：官网地址：https://yarnp...

2019-08-14 17:43:37 3277

qq_36398269的博客