angular
文章平均质量分 52
蒲公英
前端小白晋级中……
展开
-
angular 对象可能为 “null“
angular有时候会出现这种情况解决:1、设置any类型比如设置某一节点的属性,但这个节点可能是nullconst divDom: any = document.getElementById('id');// 之后处理divDom,就不会有null的报错2、问号添加比如进行某个方法的下一步,例如处理:开始下一步之前加上?代表值不确定...原创 2022-03-09 14:31:19 · 1268 阅读 · 0 评论 -
接口返回的是每行数据而前端要合并单元格再渲染
angular接口返回的数据结构目标样式代码实现html <table style="width: 100%;border-collapse:collapse;" cellspacing="0" cellpadding="0" > <tr> <ng-container *ngFor="let item of listOfDataTitles; let i = index"> <t原创 2022-03-08 14:18:25 · 212 阅读 · 0 评论 -
给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 · 1334 阅读 · 0 评论 -
angular里使用uuid
下载npm i --sava-dev uuidnpm i --save-dev @types/uuid引入在要使用的ts文件里引入import * as uuid from 'uuid';使用const myUuid = uuid.v4();随机参数一个uuid数据下载是否成功的检查原创 2022-01-12 15:05:19 · 1293 阅读 · 0 评论 -
angular 使用ngx-qrcode2生成二维码使用
官方去官网,按这个来: https://www.npmjs.com/package/ngx-qrcode2步骤1、下载npm install ngx-qrcode2 --save2、引入import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { NgxQRCodeModule } from 'ngx-qrcode2'; import原创 2022-01-05 13:52:09 · 992 阅读 · 0 评论 -
angular上线部署跳转某个页面时 报Loading chunk 2 failed错误
错误提示原因:本地项目没有问题,上线后有些页面打不开,还报错究其原因:就是上线后缺少某个文件(如图,我就是缺少2.33d4……文件)解决我的解决办法:重新打包,重新上线走过的坑网上由于很多其他的办法,清缓存啦、查看文件解析是否正确、路径没有设置跟目录等等,我测试后都不符合解决我的错误还不如重新打包看看,看重新打包后有没有这个文件(错误里会提示缺少哪个文件)...原创 2022-01-05 09:42:46 · 1226 阅读 · 0 评论 -
ng-zorro中树(nz-tree)的拖拽
zorro的11版本angular11版本使用场景:把已经组织好的菜单设置为可以拖拽排序。使用tree来完成这个功能方法思路:1、选择正确的组件示例与方法2、对拖拽前行为进行判断,不合法的拖拽进行阻止3、对获取的数据进行处理,方便传给后端先分步实现,下面有完整代码1、选择正确的组件示例与方法使用这两个tree示例(结合使用)提示:第一个示例,无论调不调接口,都能完成视觉上的拖拽,并获得拖拽前后的数据。第二个示例,拖拽前校验,不符合条件的,阻止拖拽。这里两个合用是的效果就是:满足条件原创 2021-12-22 21:10:32 · 1408 阅读 · 0 评论 -
富文本--angular11版本
angular11版本使用的插件:"ngx-quill": "^14.3.0",参考博文:https://blog.csdn.net/yw00yw/article/details/90298593http://www.javashuo.com/article/p-qttexlsn-hn.htmlhttps://www.jianshu.com/p/a7ded48ac974https://blog.csdn.net/zyxhangiian123456789/article/details/10790原创 2021-11-23 18:33:21 · 1163 阅读 · 0 评论 -
Echarts22--echarts中tooltip提示框位置控制
问题及解决问题:在div的边缘处放了echarts图,但鼠标移上去时,tooltip显示不完全,如下图:修改后的结果:问题解决的参考地址:https://www.cnblogs.com/yeminglong/p/9934910.html方法步骤关键代码:tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)', position: (point, param原创 2021-07-07 10:00:54 · 683 阅读 · 0 评论 -
angular2项目中使用高德地图---热力图
第一次使用,记录下,下次好找相关地址:https://www.npmjs.com/package/ngx-amaphttps://xieziyu.github.io/ngx-amap/api-doc/index.htmlhttps://lbs.amap.com/dev/mapstyle/edit?styleid=a5852d8c318b404e540496283ab741c4// 安装插件npm i ngx-amap --save// 组件所在的module中导入模块import { N原创 2020-06-08 12:01:18 · 919 阅读 · 0 评论 -
npm uninstall XXX使用时报错
前提我在项目里要使用某个包时,要下载这个包。下载完了,使用时,有报错了,才知道自己下载错包了。这时有两个办法,不管这个包,去下载正确的包,或者删除这个包后下载正确的包(删除多余的包可以避免多余包带来的影响,在某些情况下)我选择了第二种删除包npm uninstall XXXnpm uninstall -g XXX 我使用这行命令时,却报错了,就是下面这种的。并不是某个包是这个问题,而是只要用这行命令删除包,就会这样这种方法不成功,我只能另外想办法了解决办法1、在package.原创 2020-12-23 10:39:26 · 2645 阅读 · 2 评论 -
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 · 689 阅读 · 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 · 782 阅读 · 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 · 721 阅读 · 0 评论 -
angular2项目里使用排他思想
普通的js排他思想示例:<body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button></body><script> var btns = d原创 2020-08-31 16:52:36 · 268 阅读 · 0 评论 -
openlayer使用——在angular2项目里给地图添加全屏控件和图标
效果还是用代码进行解释1、html// 这个放哪无所谓,后期要移到地图上的。设置图片的显示大小,在地图发生变化时,图片的大小始终不发生改变<div #item1 class="mapimg"> <img src="assets/images/item.png" alt=""></div>// map一定要有宽高<div class="flagmap" #flagmap> <div class="map" #map>原创 2020-08-31 16:07:56 · 217 阅读 · 0 评论 -
openlayers使用——在angular2里项目里给地图添加缩放条
在angular里怎么使用openlayers: 链接默认结果样式添加css样式1、html中的代码<div class="flagmap" #flagmap> <div class="map" #map> </div></div>2、ts中的代码 @ViewChild('map', { static: false }) map1: any;ngAfterViewInit(): void {this.M原创 2020-08-31 15:54:00 · 211 阅读 · 0 评论 -
在angular2里引入openlayers
原始效果:1、下载// 我用的是6.4.0的版本,这是指定版本下载npm install --save ol@6.4.0检查:确认下载成功2、引入在要使用的组件里引入:import { Map, View } from 'ol';import { Tile } from 'ol/layer';import OSM from 'ol/source/OSM';import XYZ from 'ol/source/XYZ';……3、使用html页面// 给容器设定宽高,否则没有原创 2020-08-21 15:05:36 · 744 阅读 · 1 评论 -
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 · 7043 阅读 · 1 评论 -
Echarts4-- echarts完成目标折线图
目标:代码:import { Component, OnInit, ViewChild } from '@angular/core';@ViewChild('main1') dom: any; constructor(private datePipe: DatePipe, private titleService: Title) { this.titleService.setTitle('尝试页面'); } async ngOnInit() { // 基于准备好的do原创 2020-07-03 17:14:17 · 564 阅读 · 0 评论 -
Cannot read property ‘getAttribute‘ of null
我在使用echarts时,按官网的例子写的,却出现了这个错误:具体代码是这样的:// html<div id="main" style="width: 600px;height:400px;"></div>//js ngOnInit() : void{ this.getEcharts(); }async getEcharts() { // 基于准备好的dom,初始化echarts实例 const dom: any = await doc原创 2020-07-03 15:19:23 · 4219 阅读 · 0 评论 -
忘了的Number()的巧用
我是使用的angular9做的项目,遇到的这个问题,记录一下调接口时,后台返回给我的月份是:01、02、03、……、11、12,但我想要的是:0、1、2、……、11、12。我本来是想做个判断,把0去掉。当我使用Number(res.data)后,结果就是已经去掉0了。惊喜,嘿嘿嘿……其实这些知识都是以前学过的,只是忘了而已。我们还是要经常回顾下以前的知识才行,让瞬时记忆变为短期记忆。...原创 2020-06-06 19:26:43 · 141 阅读 · 0 评论 -
ngif的巧用
后台返回的数据是 true和false,我要根据 true和false 来输出是否有隐患1、接口请求把后台返回的数据获取到,渲染到前台页面2、特殊数据特别处理代码:<td>{{ data.stepName }}</td><td>{{ data.runOrderReceiveTime | date: 'yyyy-MM-dd HH:mm:ss' }}</td><td>{{ data.strideStep }}</td>&l原创 2020-06-03 14:09:37 · 1251 阅读 · 0 评论 -
angular2保留两位小数点
我的项目使用的是angular-cil 9.0自己写了个求和函数,得到最终和,这个和恰好是整数,但要求要有两位小数,我这样实现得: <td style="color: blue; font-weight: 700;"> {{totle2 | number:'0.2-2'}} </td>0.2 整数位保留最小位数.小数位保留最小位数,-2 -小数位最大保留位置官方解释:使用方法:number_expression | number[:digitInfo];digit原创 2020-06-02 15:13:30 · 4385 阅读 · 3 评论 -
ERROR in Maximum call stack size exceeded错误的解决方法
翻译就是:超过最大调用堆栈大小时出错我是在angular-cil项目里,创建模块时出现的错误,大致环境如下:ng g m coreng g m shareng g m pages我在app.module里引入core,core处理其他模块,减轻app.module模块的压力。core把其他的模块都引入进来。// app.module里import { CoreModule } from './core/core.module';// core.module里import { Pages原创 2020-05-09 10:02:12 · 2859 阅读 · 0 评论 -
angular2中自定义模块的构造与使用
angular中内置模块有:核心模块:@angular/core通用模块:@angular/common表单模块:@angular/forms网络模块:@angular/http……angular中的自定义模块前提:当我们项目比较小的时候可以不用自定义模块。但是当我们项目非常庞大的时候把所有的组件都挂载到根模块里面不是特别合适。所以这个时候我们就可以自定义模块来组织我们的项目。并且...原创 2020-05-06 16:38:27 · 520 阅读 · 0 评论 -
::ng-deep 与 :host ::ng-deep
父组件调用子组件,不能修改子组件的样式,这时,使用::ng-deep,可以覆盖子逐渐的样式,自达子组件。这样会导致子组件污染,其他地方使用时,样式已经改变。这时。使用:host ::ng-deep,就会保护子组件。...原创 2020-04-27 16:29:34 · 1212 阅读 · 0 评论 -
使用变量保存了代码或链接,可能会引起XSS问题
跨站脚本攻击:比如我们内嵌一个iframe,正常情况下是可以加载出来的,但src是个变量的话,angular就会就会阻止内容的展示1、正常显示的代码:<iframe src="https://www.baidu.com/" style="width: 500px; height: 200px;">链接</iframe>2、报错的代码:<iframe...原创 2020-04-27 15:57:17 · 175 阅读 · 0 评论 -
angular2中组件与服务一起使用
大致思想:把接口调用写在服务里,再把服务引入组件,这样,每次复用组件时,只要改服务里的接口数据就行了。具体实现:1、创建组件ng g component components/home2、创建服务ng g service components/home/homeservice把服务与接口放在统一文件夹里(同级),这点不强求,只是放在一起的话,复用组件时转移起来简单。3、在服务里写...原创 2020-04-27 15:13:58 · 479 阅读 · 0 评论 -
angular2里引入flexible.js(rem的布局)
今天想实现页面的自适应,本来用的是栅格,但效果不理想,就想起了rem布局。以前使用rem布局,都是在原生html里,还没在框架里使用过,百度没百度出来,就自己琢磨,不知道方法规范不规范,反正成功了,操作如下:1、下载flexible.js2、引入到angular项目里3、根据自己的需要修改细节3.1、在flexible.js里修改每份的像素,3.2、引入cssrem插件,在设置里设...原创 2020-04-26 21:35:52 · 1074 阅读 · 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 · 403 阅读 · 1 评论 -
Echarts1-- angular2中引入echarts
我用的是angular-cil 9.01、下载echartsnpm install echarts --savenpm install ngx-echarts --save或cnpm install echarts --savecnpm install ngx-echarts --save下载结果:2、 在angular.json 配置echarts路径"scripts"...原创 2020-04-22 15:33:41 · 448 阅读 · 0 评论 -
给angular2项目添加cookies并在其他页面上获取
先说明下token的原理吧!在浏览器端的结果是这样的:登录成功的话,将token添加到cookie中,其他页面进行请求时,都要带上token值,来增加一层保护机制。好了,接下来讲具体实现吧!1、安装 ngx-cookie-service我用的是angular-cil,接下来的代码也是angular-cil的npm install ngx-cookie-service --save...原创 2020-04-10 11:23:22 · 1404 阅读 · 0 评论 -
angular2里的双向数据绑定和时间格式
只有引入表单相关的模块,才可以进行双向数据绑定在app.module.ts里import { FormsModule } from '@angular/forms'; imports: [ …… FormsModule ]在组件里// html 里<input type="text" name="a" id="a" [(ngModel)]="a">// ts ...原创 2020-04-01 14:37:30 · 281 阅读 · 0 评论 -
angular2里的get、post、jsonp、axios请求
angular get请求具体步骤:1、在app.module.ts里引入HttpClientModule,并注入import { HttpClientModule } from '@angular/common/http'; imports: [ …… HttpClientModule ]2、在用到的地方(组件)里引入HttpClient,并在构造函数里声明 import...原创 2020-04-01 10:12:54 · 1108 阅读 · 0 评论 -
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 · 4304 阅读 · 0 评论 -
angular2里引入highcharts
走了好多坑,终于成功了1、先下载第三方包npm i --save angular-highcharts highchartsnpm i --save-dev @types/highcharts下载完在package.json里检查看有没有下载成功2、在app.modules.ts里引入模块注意 我这一步老是出错,后来就不引入了,不引入也正常运行(有解决办法的,可以告诉我) im...原创 2020-03-25 13:51:16 · 286 阅读 · 0 评论 -
关于函数里的回调函数或对象
使用某个函数是,参数是回调函数,可以在外面先定义这个函数,再把这个函数名放入参数中,但这样有个限制,必须先定义再使用:像这种的就不行 var chart = Highcharts.chart('container', options); var options:any={ };//或 this.http.post(apiUrl+'/Profile/PostProfilePictureB...原创 2020-03-25 11:52:16 · 369 阅读 · 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 · 758 阅读 · 0 评论 -
Angular2使用ng-zorro组件库的表格组件,让里面的“暂无数据”隐藏
使用NG-ZERO组件制作表格时,nz-table表格会有自带的"暂无数据",怎么让它隐藏?就是这样的表格下面会多出一行暂无数据这样的图表想把它去掉的话只需要加上[[nzData]="[{}]"],让nzData属性为空就可以 <nz-table #borderedTable nzBordered [nzData]="[{}]"> ...原创 2020-03-18 10:39:33 · 1970 阅读 · 0 评论