2020年07月_蒲公英

原创 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

原创把出生日期转换年龄

以前我竟然不知道前台的数据绑定里可以调用函数，啊！！！妄为一个前端工作者我在写angular2项目，表格里要显示年龄，结果样式：接口返回的结果：我之前一直尝试用过滤器或者管道，一直报错，这里就不说了，上正确代码：html:// data.birthTime就是接口返回出生日期<td>{{ getAge(data.birthTime)}}</td>ts： getAge(age) { // 尽量使用const或let，舍弃var吧 const tim

2020-07-31 11:08:06 1103

原创修改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 2855

原创关于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 991

原创在angular2中对接口的健壮性处理（错误处理）

之前的处理在写接口调用处理数据时，我之前一直用的是async/await，即使返回非200，我也能处理，就像这样： const { data: res } = await this.$http.get('categories', { params: this.querInfo }) if (res.meta.status !== 200) { return this.$message.error('请求列表失败，失败原因：' + res.meta.res) }

2020-07-22 15:53:44 445

原创 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 1301

原创带有“年月日时分秒”的时间选择器

效果：说明：我用的是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 1702

原创 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

原创 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

原创 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 2511

原创 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 1796 5

web