问题描述:
有一个可用性日历,显示一个人是否忙于特定的插槽(每天分为两个插槽)。此状态存储在isSlotFree
布尔值2d数组中(此数组的大小为31 x 2)。最初,此数组中的所有值都初始化为true。然后,向请求繁忙日期的服务器发出http get请求。收到它们后,将调用函数setIsSlotFree()
以将数组中的相应值设置为false。在视图(HTML文件)中,每个插槽都有一个<td>
元素。这些元素中的每一个都基于存储在数组的相关索引中的布尔值来更新它们的颜色(使用类样式)。问题是 html页面没有反映在调用setIsSlotFree()
函数后对数组所做的更改。(即.html元素仍然将所有值都视为true)。但是,当我在get请求之后立即在控制台中打印数组时,它已将适当的值更改为false。触发任何事件时,只有视图更新为正确的值。这有什么问题?
以下是component.ts文件的相关部分
export class CalendarComponent implements OnInit {
viewDate: Date;
isSlotFree: boolean[][] = [
[true, true]
];
constructor(private http: HttpClient) {
}
ngOnInit() {
this.viewDate = new Date();
var i: number;
var j: number;
for (i = 1; i < 31; i++) {
this.isSlotFree.push([true, true]);
}
let p = new HttpParams().set('month', (this.viewDate.getMonth() + 1).toString());
this.http.get < busyDateResponse[] > ("http://localhost:51967/api/stylists/getBusyDates", {
params: p
}).subscribe(res => {
this.setIsSlotFree(res);
});
this.x = true;
console.log(this.isSlotFree);
this.viewDate = new Date();
}
setIsSlotFree(res: busyDateResponse[]): void {
var busy_date: busyDateResponse;
for (busy_date of res) {
var temp: number = (busy_date.slot == 'm') ? 0 : 1;
this.isSlotFree[busy_date.day - 1][temp] = false;
}
}
}
interface busyDateResponse {
$id: string;
day: number;
month: number;
year: number;
slot: string;
}
以下显示了component.html文件的相关部分
<ng-template #cellTemplate let-day="day" let-locale="locale">
<div class="cal-cell-top">
<div class="cal-day-number w3-xlarge">{{ day.date | calendarDate:'monthViewDayNumber':locale }}</div>
<br>
</div>
<div *ngIf="day.inMonth && day.isFuture">
<table style="width:100%">
<tr>
<td class="calendar-slot" [ngClass]="{'w3-green': isSlotFree[day.date.getDate()-1][0], 'w3-red': !isSlotFree[day.date.getDate()-1][0]}">{{isSlotFree[day.date.getDate()-1][0]}}Morning</td>
<mat-checkbox (change)="editSelectedSlots($event)" [checked]="isSelectedSlot(day.date.getDate() + '_' + day.date.getMonth() + '_' + day.date.getFullYear() + '_m')?true:false" [id]="day.date.getDate() + '_' + day.date.getMonth() + '_' + day.date.getFullYear() + '_m'"
*ngIf="isSlotFree[day.date.getDate()-1][0]"></mat-checkbox>
</tr>
<tr>
<td class="calendar-slot" [ngClass]="{'w3-green': isSlotFree[day.date.getDate()-1][1], 'w3-red': !isSlotFree[day.date.getDate()-1][1]}">{{isSlotFree[day.date.getDate()-1][1]}}Evening</td>
<mat-checkbox (change)="editSelectedSlots($event)" [checked]="isSelectedSlot(day.date.getDate() + '_' + day.date.getMonth() + '_' + day.date.getFullYear() + '_e')?true:false" [id]="day.date.getDate() + '_' + day.date.getMonth() + '_' + day.date.getFullYear() + '_e'"
*ngIf="isSlotFree[day.date.getDate()-1][1]">
</mat-checkbox>
</tr>
</table>
</div>
</ng-template>
<div>
<mwl-calendar-month-view [viewDate]="viewDate" [events]="events" (eventClicked)="eventClicked($event)" (dayClicked)="dayClicked($event)" [cellTemplate]="cellTemplate" [refresh]="refresh">
</mwl-calendar-month-view>
<div class="w3-center">
<button mat-raised-button>Make booking</button>
</div>
</div>
请注意<mwl-calendar-month-view>
使用ng-template
在日历中生成单元格。
答案 0 :(得分:1)
在阅读了很多有关角度变化检测的内容后,我终于找到了解决方案。在运行setIsSlotFree()
函数之前执行更改检测策略。即使修改了数组中的值,也不会在此函数更改数组值时执行更改检测策略。因此,在将所有更改写入阵列后,需要手动执行更改检测。这可以使用ChangeDetectorRef.detectChanges()
函数末尾的setIsSlotFree()
来完成。
如果组件的构造函数是constructor(private http: HttpClient, private ref: ChangeDetectorRef)
那么,isSlotFree()
函数看起来像,
setIsSlotFree(res:busyDateResponse[]):void {
var busy_date:busyDateResponse;
for(busy_date of res) {
var temp:number = (busy_date.slot=='m')?0:1;
this.isSlotFree[busy_date.day-1][temp] = false;
}
this.ref.detectChanges();
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
&#13;