angular
tangdou369098655
快乐生活~~~
展开
-
解决angular11+zorro用nz-pagination PageSize PageIndex 绑定失效问题(分页失效问题)
今天遇到一个很奇葩的问题,看文档写的nzPageSizenz PageIndex是支持双向绑定的,但是获取数据以后,页码还是没变回正常的,解决方案如下:关于分页失效:主要代码是获取数据以后重新赋值一下async getTable(params) { // const res4: any = await this.myHttpRes('post', this.baseUrl + '/testData', params, false); // if (res4 && res4原创 2021-10-15 00:46:31 · 945 阅读 · 0 评论 -
解决angular11+zorro使用table组件排序失效以及分页组件失效问题,附完整DEMO代码
关于这个排序失效问题的核心点,跟这个有关系:[nzFrontPagination]=“false”关于分页组件失效的问题,是你获取数据以后,需要给页码,页数,总条数都要重新赋值,这个真的是好无语要考虑清楚,你是前端分页还是后端分页,如果是前端分页,代码可以参考官方zorro文档,里边很多,如果你是后端分页,那么可以参考下面的DEMO首先新建 一个组件,在路由里和模块里都注册一下,注册路由你自己根据需求来,备注:如果不注册到当前模块,某些zorro的组件是无法使用的,会报错,这个是angular11原创 2021-10-15 00:47:26 · 853 阅读 · 0 评论 -
angular2-qrcode 引用报错 error NG8001: ‘qr-code‘ is not a known element:
error NG8001: ‘qr-code’ is not a known element:解决方案假如你的组件模块叫做a-demo.module,你的组件叫做print.component.ts检查使用方法,在当前组件的模块里引入src\app\routes\a-demo\a-demo.module.tsimport { NgModule } from '@angular/core';import { QRCodeModule } from 'angular2-qrcode';...原创 2021-08-14 00:29:34 · 851 阅读 · 0 评论 -
VUE Angular通用动态列表组件-亦可为自动轮播组件-01-纵向滚动,鼠标划入停止滚动
本文为纵向轮播,横向轮播/动态列表组件请戳----代码是angular的,稍微改改就可以放入Vue项目里,差别不大哟以下代码可以根据实际情况自行调整父组件html<app-scroll-up [dataObj]="dataObjUp"> <div class="slot-one"> <div [style]="{ height: dataObjUp.height + dataObjUp.unit }" class="inner_item" *n原创 2021-07-08 23:22:33 · 193 阅读 · 0 评论 -
VUE Angular通用动态列表组件-亦可为自动轮播组件-02-根据数据量自动横向滚动,鼠标划入停止滚动
本文为横向轮播,纵向轮播/动态列表组件请戳----代码是angular的,稍微改改就可以放入Vue项目里,差别不大哟以下代码可以根据实际情况自行调整父组件html<app-scroll-left> <div class="slot-one"> <div [style]="{ width: dataObjLeft.width + dataObjLeft.unit }" class="inner_item" *ngFor="let item of原创 2021-07-08 23:21:41 · 182 阅读 · 0 评论 -
angular基础之单向绑定,双向绑定以及数据绑定失效的问题
单向绑定事件绑定:<input (keyup)="inputChange($event)" />属性绑定:<input [value]="inputValue" />插值绑定{{myValue}}双向绑定<input [(ngModel)]="myInputValue" />下面来说一下 ,当你觉得数据绑定失效是怎么回事很多时候,你会把数据绑定双向写成单向,就会看起来绑定是失效的,所以仔细检查一下你的[(ngModel)]是不是原创 2021-06-09 21:14:05 · 1030 阅读 · 0 评论 -
NG-ZORRO + Angular11增加自定义全局样式,不影响其他页面全局样式,仅作用于当前页面
实现只需要两步tsimport { ViewEncapsulation } from '@angular/core';// 关键代码@Component({ selector: 'app-test', templateUrl: './test.component.html', styleUrls: ['/test.component.less'], encapsulation: ViewEncapsulation.Emulated, // 关键代码})less/deep/.原创 2021-06-09 21:13:35 · 598 阅读 · 1 评论 -
NG-Alain + Angular11使用ModalHelper实现简单版本弹框,代码超级少,记得模块要引用这个组件
先看一下目录结构–aa-item----modal-compment------modal-compment.component.html------modal-compment.component.less------modal-compment.component.ts----aa-compment------aa-compment.component.html------aa-compment.component.less------aa-compment.component.ts原创 2021-06-09 00:06:16 · 750 阅读 · 0 评论 -
NG-ZORRO + Angular11使用Echarts实现柱折线图-折柱混合,并给图表添加点击打印图表数据!!!详细代码
先上效果图HTML代码<div echarts #myEchart [options]="option"></div>ts代码import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';import { NgxEchartsService } from 'ngx-echarts';@Component({ selector: 'app-oee-report', templ原创 2021-06-07 23:06:59 · 442 阅读 · 0 评论 -
NG-ZORRO + angular-cli11 表格横纵向单元格合并,按需设置背景色,解决动态合并单元格动态colspan情况下,nzLeft固定列失效问题,也适用VUE,REACT
NG-ZORRO + angular-cli11 实现表格横纵向单元格合并,按需设置背景色,并解决动态合并单元格动态colspan情况下,nzLeft固定列失效问题原创 2021-06-03 22:54:44 · 1403 阅读 · 0 评论 -
angular11给Echarts添加点击事件,无脑抄代码的时候到了~~ 超好用
关于引入Echarts的方法在此直通车在此接下来就是添加点击事件,获取X轴的数据<div echarts #charts [options]="chartOption" class="charts"></div>import { NgxEchartsService } from 'ngx-echarts'; @ViewChild('charts', { static: false }) charts: ElementRef;constructor( priv原创 2021-06-03 22:52:41 · 792 阅读 · 0 评论 -
npm 环境搭建---全局安装angular cli ---升级本地angular版本---搭建ng-alain
1.环境搭建node -v # 查看 Node.js 当前版本npm -v # 查看 Npm 当前版本2.设定淘宝提供 Npm 源镜像# 设置淘宝源npm config set registry https://registry.npm.taobao.orgnpm config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass# 恢复默认源npm config delete registrynpm config原创 2021-05-16 13:35:49 · 3298 阅读 · 1 评论 -
angular 引入服务报错global is not defined----angular11引入service报错Can‘t resolve ‘@core/net/aa/aa.service‘
先来说第一个问题:angular 引入服务报错global is not defined今天遇到一个问题: 我以为是代码问题,排查很久没找到问题所在angular 引入服务报错global is not defined解决方案如下:在Angular 某些 版本中,明确了会导致一部分库的兼容性BUG。在 polyfill.ts 这个文件里面加上一行代码就可以了(window as any).global = window接下来说第二个问题,当你用angular11引入service报错Can原创 2021-05-16 13:34:45 · 1094 阅读 · 0 评论 -
Angular基础之ngFor遍历对象数组获取key和value渲染页面的几种方法
Angular的ngFor遍历对象数组获取key和value的几种方法方法一ts文件:export class MyDemo { objectKeys = Object.keys; myObj = { a: 'a', b: 'b' }; constructor(){}}html文件:<div *ngFor="let key of objectKeys(myObj)"> {{key}} : {{myObj[key]}}</div&原创 2021-05-10 21:19:50 · 4016 阅读 · 0 评论 -
angular + ng-zorro 表格后台分页及排序功能实现,angular + ng-zorro 表格排序不起作用解决办法
angular + ng-zorro 表格排序不起作用是因为数据是从后端获取的,也是后端分页,所以要自己写排序啦~~~~举例:HTML<nz-table #basicTable nzBordered [nzData]="listOfData" [nzTotal]="bottomTable.total" [nzPageSize]="bottomTable.pageSize" [nzFrontPagination]="false" [nzPageIndex]="bottomTable.page原创 2021-05-10 21:12:37 · 1141 阅读 · 0 评论 -
解决angular11打包报错Type ‘Event‘ is missing the following properties from type ‘any[]‘: ...Type ‘Event‘ i
出现这种情况,需要检查一下以下事项1.ts类型声明和html里写的是否一致1.1举例如下,子组件代码需要注意事项,子组件调用父组件方法,点击传参给父组件,在父组件触发一些时间,当前this指向是父组件的this<button (click)="sentToParent(data)">点击传参给父组件,在父组件触发一些时间,当前this指向是父组件的this</button> @Input() public childObjData = { a: '',原创 2021-05-06 23:35:25 · 7065 阅读 · 2 评论 -
angular11 报错 ERROR Error: If ngModel is used within a form tag, either the name attribute must be s
angular 报错 ERROR Error: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as ‘standalone’ in ngModelOptions. Example 1: <input [(ngModel)]=“person.firstName” name=“first”> Example 2: <原创 2021-05-05 23:42:29 · 333 阅读 · 0 评论 -
angular+ZORRO中nz-table 大小屏幕自适应、滚动条、点击事件
首先来说屏幕自适应 HTML<div class="container right_table"> <nz-table #basicTable nzBordered [nzData]="datas" [nzScroll]="{ x: datasTh.length*180 + 360+'px', y: '235px' }" [nzTotal]="topTable.total" [nzPageSize]="topTable.pageSize" [nzPageIndex]="to原创 2021-05-05 23:41:20 · 2638 阅读 · 0 评论 -
ng + zorro angular表格横纵向合并,横向目前是手动,纵向是自动合并,微调后可适配三大框架使用
表格横纵向合并,可以看一下代码编写之前和之后的样式,先上图~~表格页面文件.html<h1>正常表格</h1><nz-table #colSpanTable [nzData]="table03" nzBordered> <tbody> <tr *ngFor="let item of table03; index as i"> <td>{{item.Project01}}</td>原创 2021-04-28 23:27:31 · 799 阅读 · 0 评论 -
angular 输入框获取焦点失效的问题
重点说明: 假如先设定了 输入框disabled又打开,然后执行获取焦点,可能会失效,这个时候可以把getFocus函数放在定时器里,1秒钟后执行,就可以了哦~具体代码如下html <input #myInput id="myInputr" nz-input class="myInput" [(ngModel)]="aaa.val原创 2021-04-22 22:34:09 · 528 阅读 · 0 评论 -
angular11报错Can‘t bind to ‘ngForOf‘ since it isn‘t a known property of ‘tr‘. 三种排查办法以及解决方案
当你遇到Can’t bind to ‘ngForOf’ since it isn’t a known property of ‘tr’. (" //无法绑定到“ngforof”,因为它不是“tr”的已知属性。(“可能问题一:当前错误原因是没有绑定ngforof,在@ngmodule()中添加browsermodule到imports:[],如果它是根模块(appmodule),则为commonmodule。简而言之,就是根部app.module有没有导入这个基础模块,检查一下可能问题二:出现此问题是原创 2021-04-22 22:29:35 · 3292 阅读 · 0 评论