需要的结果： 后台返回的数据： 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 this.com.getSource();
// tslint:disable-next-line: prefer-for-of
for ( 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 this.com.getZa(sid);
// tslint:disable-next-line: prefer-for-of
for ( 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-of
for (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-of
for (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 }">
<p>该月共<span class="spanItems">{{totle1}}</span>天，巡查次数<span class="spanItems">{{totle2}}</span>次，巡查天数<span class="spanItems">{{totle2}}</span>天，巡查发现隐患问题<span class="spanItems spanItems2">{{totle3}}</span>个，剩余<span class="spanItems spanItems2">{{totle3}}</span>个问题未处理。</p>
<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">
<p class="status1"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 6">
<p class="status"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 3">
<p class="status3"> {{item.content}}</p>
</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">
<p class="status1"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 6">
<p class="status"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 3">
<p class="status3"> {{item.content}}</p>
</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">
<p class="status1"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 6">
<p class="status"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 3">
<p class="status3"> {{item.content}}</p>
</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">
<p class="status1"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 6">
<p class="status"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 3">
<p class="status3"> {{item.content}}</p>
</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">
<p class="status1"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 6">
<p class="status"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 3">
<p class="status3"> {{item.content}}</p>
</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">
<p class="status1"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 6">
<p class="status"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 3">
<p class="status3"> {{item.content}}</p>
</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">
<p class="status1"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 6">
<p class="status"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 3">
<p class="status3"> {{item.content}}</p>
</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">
<p class="status1"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 6">
<p class="status"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 3">
<p class="status3"> {{item.content}}</p>
</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">
<p class="status1"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 6">
<p class="status"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 3">
<p class="status3"> {{item.content}}</p>
</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">
<p class="status1"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 6">
<p class="status"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 3">
<p class="status3"> {{item.content}}</p>
</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">
<p class="status1"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 6">
<p class="status"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 3">
<p class="status3"> {{item.content}}</p>
</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">
<p class="status1"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 6">
<p class="status"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 3">
<p class="status3"> {{item.content}}</p>
</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">
<p class="status1"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 6">
<p class="status"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 3">
<p class="status3"> {{item.content}}</p>
</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">
<p class="status1"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 6">
<p class="status"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 3">
<p class="status3"> {{item.content}}</p>
</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">
<p class="status1"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 6">
<p class="status"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 3">
<p class="status3"> {{item.content}}</p>
</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">
<p class="status1"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 6">
<p class="status"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 3">
<p class="status3"> {{item.content}}</p>
</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">
<p class="status1"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 6">
<p class="status"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 3">
<p class="status3"> {{item.content}}</p>
</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">
<p class="status1"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 6">
<p class="status"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 3">
<p class="status3"> {{item.content}}</p>
</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">
<p class="status1"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 6">
<p class="status"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 3">
<p class="status3"> {{item.content}}</p>
</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">
<p class="status1"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 6">
<p class="status"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 3">
<p class="status3"> {{item.content}}</p>
</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">
<p class="status1"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 6">
<p class="status"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 3">
<p class="status3"> {{item.content}}</p>
</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">
<p class="status1"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 6">
<p class="status"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 3">
<p class="status3"> {{item.content}}</p>
</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">
<p class="status1"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 6">
<p class="status"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 3">
<p class="status3"> {{item.content}}</p>
</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">
<p class="status1"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 6">
<p class="status"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 3">
<p class="status3"> {{item.content}}</p>
</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">
<p class="status1"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 6">
<p class="status"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 3">
<p class="status3"> {{item.content}}</p>
</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">
<p class="status1"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 6">
<p class="status"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 3">
<p class="status3"> {{item.content}}</p>
</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">
<p class="status1"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 6">
<p class="status"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 3">
<p class="status3"> {{item.content}}</p>
</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">
<p class="status1"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 6">
<p class="status"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 3">
<p class="status3"> {{item.content}}</p>
</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">
<p class="status1"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 6">
<p class="status"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 3">
<p class="status3"> {{item.content}}</p>
</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">
<p class="status1"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 6">
<p class="status"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 3">
<p class="status3"> {{item.content}}</p>
</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">
<p class="status1"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 6">
<p class="status"> {{item.content}}</p>
</ng-container>
<ng-container *ngIf="item.content.length === 3">
<p class="status3"> {{item.content}}</p>
</ng-container>
</li>
</ng-template>
</ng-container>
</ng-container>
</ul>
</nz-calendar>
<p style="color: red">*说明：下方的时间仍表示当月</p>
<p style="color: red">*说明：红色代表当天巡查有隐患问题，蓝色代表当天正在巡查中，灰色代表当天未巡查，绿色代表当天巡查无隐患问题。</p>
</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">
<p [class]='item.status'>
{{item.text}}
</p>
</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%);
}
