1200字范文 > angular2项目中使用ng-zorro日历组件

angular2项目中使用ng-zorro日历组件

时间：2024-04-28 13:14:51

需要的结果：

后台返回的数据：

antd里要的数据结构：

很明显，我们要对数据进行处理才能符合要求，接下来进行详解：

1、选择antd中符合要求的模板

这里选择这个：

2、应用到项目里

<nz-calendar [(ngModel)]="date" (nzSelectChange)="selectChange($event)">

一会统一放完整代码

3、请求后台数据，并处理数据

4、渲染到日历模板里

5、代码

5.1、ts的代码

export class DaycheckComponent implements OnInit {public date: any;public startDate: any ;public endDate: any;public listOfSelectedValue = 1070;public listOfOption: any = [];public listOfSelectedValue2 = 3378;public listOfOption2: any = [];// 表格数据public listOfData: any = [];// 数据总条数public total: any = 0;// 当前页public page: any = 1;// 每一页行数(每页几条数据)public MaxResultCount: any = 10;// 跳转数量 skipCount=page*MaxResultCount 等于跳转页数*每页几条(这个是请求数据时要用的)public SkipCount: any = 0;public position: NzTabPosition = 'left';public mode: NzCalendarMode = 'month';public nowDate: any;public listDataMap: any = {};public totle1: any;public totle2: any;public totle3: any;public list: any = ['first', 'second', 'third', 'fourth', 'fifth', 'sixth', 'seventh', 'eighth', 'ninth', 'tenth','eleventh', 'twelfth', 'thirteenth', 'fourteenth', 'fifteenth', 'sixteenth', 'seventeenth','eighteenth', 'nineteenth', 'twentieth', 'twentyfirst', 'twentysecond', 'twentythird','twentyfourth', 'twentyfifth', 'twentysixth', 'twentyseventh', 'twentyeighth', 'twentyninth','thirtieth', 'thirtyfirst'];// 骨架屏public loading: any = true;// 日常检查的日历数据constructor(private datePipe: DatePipe, private com: CommonService, private check: CheckserService,private titleService: Title) {this.titleService.setTitle('日常检查');}async ngOnInit() {this.date = new Date();await this.getOne();await this.getTwo(this.listOfSelectedValue);// 当月this.startDate = this.CurrentMonthFirst(this.date);// 当月最后一天this.endDate = this.CurrentMonthLast(this.date);await this.getTable(this.listOfSelectedValue2, this.startDate, this.endDate);const end = this.endDate.slice(-2);const start = this.startDate.slice(-2);this.totle1 = Number(end) - Number(start) + 1;// console.log(this.totle1);this.loading = false;}// 管理单位async getOne() {const { result: res }: any = await .getSource();// tslint:disable-next-line: prefer-for-offor ( let i = 0; i < res.items.length; i++ ) {const obj: any = {};obj.label = res.items[i].manage_Unit_Name;obj.value = res.items[i].id;this.listOfOption.push(obj);}}// 单位名称（虽然在页面上没有显示，但为了获得id，就写了这个方法）async getTwo(sid) {const { result: res }: any = await .getZa(sid);// tslint:disable-next-line: prefer-for-offor ( let i = 0; i < res.items.length; i++ ) {const obj: any = {};obj.label = res.items[i].proName;obj.value = res.items[i].id;this.listOfOption2.push(obj);}console.log( this.listOfOption2);// 暂时把管理单位的id赋值给gaibainlistOfSelectedValue2，这个是可以随着下拉改变而改变的this.listOfSelectedValue2 = res.items[0].id;}// 请求后台日历的数据async getTable(pid, startdate, enddate) {const { result: res }: any = await this.check.getCalendar(pid, startdate, enddate);console.log(res.items);const Str = {};this.totle2 = 0;this.totle3 = 0;// 两个for分开写，是为了逻辑清楚，合并也是可以合并的// tslint:disable-next-line:prefer-for-offor (let i = 0; i < res.items.length; i++) {if (res.items[i].pStatus !== null) {if (res.items[i].pStatus.length === 7 || res.items[i].pStatus.length === 6) {this.totle2 = this.totle2 + 1;}if (res.items[i].pStatus.length === 7) {this.totle3 = this.totle3 + 1;}}}// tslint:disable-next-line: prefer-for-offor (let j = 0; j < res.items.length; j++) {const arr = [];const str: any = {};if (res.items[j].pStatus !== null) {str.content = res.items[j].pStatus;arr.push(str);Str[this.list[j]] = arr;} else {this.listDataMap = null;}}this.listDataMap = Str;}// 当月份发生改变时（选择日期的回调）async selectChange(select: Date) {this.loading = true;// 选中月this.startDate = this.CurrentMonthFirst(select);console.log(this.startDate);// 选中月最后一天this.endDate = this.CurrentMonthLast(select);console.log(this.endDate);await this.getTable(this.listOfSelectedValue2, this.startDate, this.endDate);const end = this.endDate.slice(-2);const start = this.startDate.slice(-2);this.totle1 = Number(end) - Number(start) + 1;this.loading = false;console.log('月份改变');}// 关于获得月初的函数定义CurrentMonthFirst(targetDate) {// const date1 = new Date();targetDate.setDate(1);const startDate = this.datePipe.transform( targetDate, 'yyyy-MM-dd');return startDate;}// 关于获得月末的函数定义CurrentMonthLast(targetDate) {// const date = new Date();let currentMonth = targetDate.getMonth();const nextMonth = ++currentMonth;const nextMonthFirstDay = new Date(targetDate.getFullYear(), nextMonth, 1);const oneDay = 1000 * 60 * 60 * 24;const last = new Date(Number(nextMonthFirstDay) - oneDay);const endDate = this.datePipe.transform( last, 'yyyy-MM-dd');return endDate;}// 点击查看async search(id) {this.loading = true;// 每次点击，要恢复月份为当前月份，而不是之前选中的数据，怎么做？？？（解决如下）this.date = new Date();this.startDate = this.CurrentMonthFirst(this.date);this.endDate = this.CurrentMonthLast(this.date);// 现在的问题是，接口数据对了，但现实的月份没变？？？// 问题解决了，给日历加个双向数据绑定this.listOfSelectedValue2 = id;console.log(this.listOfSelectedValue2);await this.getTable(this.listOfSelectedValue2, this.startDate, this.endDate);this.loading = false;}}

处理后的数据显示：

5.2 html页面里日历渲染

// nz-skeleton是骨架屏，可要可不要，只是加上后，页面效果有提升<nz-skeleton [nzLoading]="loading" [nzParagraph]="{ rows: 4 }">该月共{{totle1}}天，巡查次数{{totle2}}次，巡查天数{{totle2}}天，巡查发现隐患问题{{totle3}}个，剩余{{totle3}}个问题未处理。<h3 class="t3">当前日期：{{date | date:'yyyy-MM-dd'}}</h3><nz-calendar [(ngModel)]="date" (nzSelectChange)="selectChange($event)"><ul *nzDateCell="let date" class="events"><ng-container [ngSwitch]="date.getDate()"><ng-container *ngSwitchCase="1"><ng-template [ngIf]="listDataMap !== '' "><li *ngFor="let item of listDataMap.first"><ng-container *ngIf="item.content.length === 7"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 6"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 3"> {{item.content}}</ng-container></li></ng-template></ng-container><ng-container *ngSwitchCase="2"><ng-template [ngIf]="listDataMap !== '' "><li *ngFor="let item of listDataMap.second"><ng-container *ngIf="item.content.length === 7"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 6"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 3"> {{item.content}}</ng-container></li></ng-template></ng-container><ng-container *ngSwitchCase="3"><ng-template [ngIf]="listDataMap !== '' "><li *ngFor="let item of listDataMap.third"><ng-container *ngIf="item.content.length === 7"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 6"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 3"> {{item.content}}</ng-container></li></ng-template></ng-container><ng-container *ngSwitchCase="4"><ng-template [ngIf]="listDataMap !== '' "><li *ngFor="let item of listDataMap.fourth"><ng-container *ngIf="item.content.length === 7"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 6"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 3"> {{item.content}}</ng-container></li></ng-template></ng-container><ng-container *ngSwitchCase="5"><ng-template [ngIf]="listDataMap !== '' "><li *ngFor="let item of listDataMap.fifth"><ng-container *ngIf="item.content.length === 7"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 6"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 3"> {{item.content}}</ng-container></li></ng-template></ng-container><ng-container *ngSwitchCase="6"><ng-template [ngIf]="listDataMap !== '' "><li *ngFor="let item of listDataMap.sixth"><ng-container *ngIf="item.content.length === 7"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 6"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 3"> {{item.content}}</ng-container></li></ng-template></ng-container><ng-container *ngSwitchCase="7"><ng-template [ngIf]="listDataMap !== '' "><li *ngFor="let item of listDataMap.seventh"><ng-container *ngIf="item.content.length === 7"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 6"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 3"> {{item.content}}</ng-container></li></ng-template></ng-container><ng-container *ngSwitchCase="8"><ng-template [ngIf]="listDataMap !== '' "><li *ngFor="let item of listDataMap.eighth"><ng-container *ngIf="item.content.length === 7"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 6"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 3"> {{item.content}}</ng-container></li></ng-template></ng-container><ng-container *ngSwitchCase="9"><ng-template [ngIf]="listDataMap !== 'null' "><li *ngFor="let item of listDataMap.ninth"><ng-container *ngIf="item.content.length === 7"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 6"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 3"> {{item.content}}</ng-container></li></ng-template></ng-container><ng-container *ngSwitchCase="10"><ng-template [ngIf]="listDataMap !== '' "><li *ngFor="let item of listDataMap.tenth"><ng-container *ngIf="item.content.length === 7"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 6"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 3"> {{item.content}}</ng-container></li></ng-template></ng-container><ng-container *ngSwitchCase="11"><ng-template [ngIf]="listDataMap !== '' "><li *ngFor="let item of listDataMap.eleventh"><ng-container *ngIf="item.content.length === 7"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 6"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 3"> {{item.content}}</ng-container></li></ng-template></ng-container><ng-container *ngSwitchCase="12"><ng-template [ngIf]="listDataMap !== '' "><li *ngFor="let item of listDataMap.twelfth"><ng-container *ngIf="item.content.length === 7"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 6"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 3"> {{item.content}}</ng-container></li></ng-template></ng-container><ng-container *ngSwitchCase="13"><ng-template [ngIf]="listDataMap !== '' "><li *ngFor="let item of listDataMap.thirteenth"><ng-container *ngIf="item.content.length === 7"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 6"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 3"> {{item.content}}</ng-container></li></ng-template></ng-container><ng-container *ngSwitchCase="14"><ng-template [ngIf]="listDataMap !== '' "><li *ngFor="let item of listDataMap.fourteenth"><ng-container *ngIf="item.content.length === 7"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 6"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 3"> {{item.content}}</ng-container></li></ng-template></ng-container><ng-container *ngSwitchCase="15"><ng-template [ngIf]="listDataMap !== '' "><li *ngFor="let item of listDataMap.fifteenth"><ng-container *ngIf="item.content.length === 7"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 6"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 3"> {{item.content}}</ng-container></li></ng-template></ng-container><ng-container *ngSwitchCase="16"><ng-template [ngIf]="listDataMap !== '' "><li *ngFor="let item of listDataMap.sixteenth"><ng-container *ngIf="item.content.length === 7"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 6"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 3"> {{item.content}}</ng-container></li></ng-template></ng-container><ng-container *ngSwitchCase="17"><ng-template [ngIf]="listDataMap !== '' "><li *ngFor="let item of listDataMap.seventeenth"><ng-container *ngIf="item.content.length === 7"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 6"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 3"> {{item.content}}</ng-container></li></ng-template></ng-container><ng-container *ngSwitchCase="18"><ng-template [ngIf]="listDataMap !== '' "><li *ngFor="let item of listDataMap.eighteenth"><ng-container *ngIf="item.content.length === 7"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 6"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 3"> {{item.content}}</ng-container></li></ng-template></ng-container><ng-container *ngSwitchCase="19"><ng-template [ngIf]="listDataMap !== '' "><li *ngFor="let item of listDataMap.nineteenth"><ng-container *ngIf="item.content.length === 7"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 6"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 3"> {{item.content}}</ng-container></li></ng-template></ng-container><ng-container *ngSwitchCase="20"><ng-template [ngIf]="listDataMap !== '' "><li *ngFor="let item of listDataMap.twentieth"><ng-container *ngIf="item.content.length === 7"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 6"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 3"> {{item.content}}</ng-container></li></ng-template></ng-container><ng-container *ngSwitchCase="21"><ng-template [ngIf]="listDataMap !== '' "><li *ngFor="let item of listDataMap.twentyfirst"><ng-container *ngIf="item.content.length === 7"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 6"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 3"> {{item.content}}</ng-container></li></ng-template></ng-container><ng-container *ngSwitchCase="22"><ng-template [ngIf]="listDataMap !== '' "><li *ngFor="let item of listDataMap.twentysecond"><ng-container *ngIf="item.content.length === 7"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 6"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 3"> {{item.content}}</ng-container></li></ng-template></ng-container><ng-container *ngSwitchCase="23"><ng-template [ngIf]="listDataMap !== '' "><li *ngFor="let item of listDataMap.twentythird"><ng-container *ngIf="item.content.length === 7"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 6"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 3"> {{item.content}}</ng-container></li></ng-template></ng-container><ng-container *ngSwitchCase="24"><ng-template [ngIf]="listDataMap !== '' "><li *ngFor="let item of listDataMap.twentyfourth"><ng-container *ngIf="item.content.length === 7"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 6"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 3"> {{item.content}}</ng-container></li></ng-template></ng-container><ng-container *ngSwitchCase="25"><ng-template [ngIf]="listDataMap !== '' "><li *ngFor="let item of listDataMap.twentyfifth"><ng-container *ngIf="item.content.length === 7"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 6"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 3"> {{item.content}}</ng-container></li></ng-template></ng-container><ng-container *ngSwitchCase="26"><ng-template [ngIf]="listDataMap !== '' "><li *ngFor="let item of listDataMap.twentysixth"><ng-container *ngIf="item.content.length === 7"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 6"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 3"> {{item.content}}</ng-container></li></ng-template></ng-container><ng-container *ngSwitchCase="27"><ng-template [ngIf]="listDataMap !== '' "><li *ngFor="let item of listDataMap.twentyseventh"><ng-container *ngIf="item.content.length === 7"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 6"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 3"> {{item.content}}</ng-container></li></ng-template></ng-container><ng-container *ngSwitchCase="28"><ng-template [ngIf]="listDataMap !== '' "><li *ngFor="let item of listDataMap.twentyeighth"><ng-container *ngIf="item.content.length === 7"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 6"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 3"> {{item.content}}</ng-container></li></ng-template></ng-container><ng-container *ngSwitchCase="29"><ng-template [ngIf]="listDataMap !== '' "><li *ngFor="let item of listDataMap.twentyninth"><ng-container *ngIf="item.content.length === 7"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 6"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 3"> {{item.content}}</ng-container></li></ng-template></ng-container><ng-container *ngSwitchCase="30"><ng-template [ngIf]="listDataMap !== '' "><li *ngFor="let item of listDataMap.thirtieth"><ng-container *ngIf="item.content.length === 7"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 6"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 3"> {{item.content}}</ng-container></li></ng-template></ng-container><ng-container *ngSwitchCase="31"><ng-template [ngIf]="listDataMap !== '' "><li *ngFor="let item of listDataMap.thirtyfirst"><ng-container *ngIf="item.content.length === 7"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 6"> {{item.content}}</ng-container><ng-container *ngIf="item.content.length === 3"> {{item.content}}</ng-container></li></ng-template></ng-container></ng-container></ul></nz-calendar>*说明：下方的时间仍表示当月*说明：红色代表当天巡查有隐患问题，蓝色代表当天正在巡查中，灰色代表当天未巡查，绿色代表当天巡查无隐患问题。</nz-skeleton>

5.3、css样式

.status {text-align: center;margin-top: 20px;background-color: #4bc62d;color: #fff;width: 51%;height: 30px;line-height: 30px;border-radius: 5px;margin-left: 50%;transform: translate(-50%);}.status1 {text-align: center;margin-top: 20px;background-color: red;color: #fff;width: 51%;height: 30px;line-height: 30px;border-radius: 5px;margin-left: 50%;transform: translate(-50%);}.status3 {text-align: center;margin-top: 20px;background-color: grey;color: #fff;width: 51%;height: 30px;line-height: 30px;border-radius: 5px;margin-left: 50%;transform: translate(-50%);}.events {list-style: none;margin: 0;padding: 0;}.events .ant-badge-status {overflow: hidden;white-space: nowrap;width: 100%;text-overflow: ellipsis;font-size: 12px;}.notes-month {text-align: center;font-size: 28px;}.notes-month section {font-size: 28px;}th, td {text-align: center;}.spanItems {font-size: 20px;}.spanItems2 {color: red;}.t3 {font-size: 25px;}

6、我的遗留问题

我的代码有几个问题

1、看图片

2、antd里用的是ngSwitch，我不知道怎么改为if或for，导致html的代码量大

3、我的ts逻辑里的接口不是完整接口，我有另一个文档专门存放接口，这里是调用接口数据

4、ts里的js代码有点粗糙，还待改进

后续继续改进这个日历，有大神的话，请指教下，本人遗留的问题太多了，汗~

7、第一次写的有问题，下面有改进代码

没删掉错误的、麻烦的代码，是因为后续改进的代码是在这个思路上改的。

代码改进

改进结果：

1、日历单元格的渲染数据结构有问题，进行修改

用一个数组来存放一个月的数据

2、修改繁琐的条件判定，改为一个循环

按大神的建议，设置为一个循环

在之前的代码基础上修改的

完整代码在下面

3、此月数据下月依旧渲染的问题解决

按大神的建议，用date.getMonth()处理

month需要后台判定

完整代码

html文件代码

<nz-calendar > <ul *nzDateCell="let date" class="events"><ng-container [ngSwitch]="date.getMonth()"><ng-container *ngSwitchCase="month"><ng-container [ngSwitch]="date.getDate()"><ng-container *ngFor="let item of listDataMap2"><ng-container *ngSwitchCase="item.count">{{item.text}}</ng-container></ng-container></ng-container></ng-container></ng-container></ul></nz-calendar>

ts逻辑代码

month: number;listDataMap2: any = [{count: 1,status: 'error',text: '有隐患'},{count: 2,status: 'normal',text: '正常'},{count: 3,status: 'noyet',text: '未巡查'},];constructor() { }ngOnInit(): void {const time = new Date();this.month = time.getMonth();}

css的代码

.events {list-style: none;margin: 0;padding: 0;}.events .ant-badge-status {overflow: hidden;white-space: nowrap;width: 100%;text-overflow: ellipsis;font-size: 12px;}.notes-month {text-align: center;font-size: 28px;}.notes-month section {font-size: 28px;}.normal {text-align: center;margin-top: 20px;background-color: #4bc62d;color: #fff;width: 85%;height: 30px;line-height: 30px;border-radius: 5px;margin-left: 50%;transform: translate(-50%);}.error {text-align: center;margin-top: 20px;background-color: red;color: #fff;width: 85%;height: 30px;line-height: 30px;border-radius: 5px;margin-left: 50%;transform: translate(-50%);}.noyet {text-align: center;margin-top: 20px;background-color: grey;color: #fff;width: 85%;height: 30px;line-height: 30px;border-radius: 5px;margin-left: 50%;transform: translate(-50%);}

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。