javascript – html元素属性和脚本值之间的数据绑定未同步

2019年7月28日 119次阅读

问题描述：

有一个可用性日历,显示一个人是否忙于特定的插槽(每天分为两个插槽).此状态存储在isSlotFree布尔值2d数组中(此数组的大小为31 x 2).最初,此数组中的所有值都初始化为true.然后,向请求繁忙日期的服务器发出http get请求.收到它们后,调用函数setIsSlotFree()将数组中的相应值设置为false.在视图(
HTML文件)中有一个< td>每个插槽的元素.这些元素中的每一个都基于存储在数组的相关索引中的布尔值来更新它们的颜色(使用类样式).问题是html页面没有反映在调用setIsSlotFree()函数后对数组所做的更改. (即.html元素仍然将所有值视为真).但是,当我在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在日历中生成单元格.

最佳答案 好吧,在阅读了很多有关角度变化检测的内容后,我终于找到了解决方案在运行setIsSlotFree()函数之前执行更改检测策略.即使修改了数组中的值,也不会在此函数更改数组值时执行更改检测策略.因此,在将所有更改写入阵列后,需要手动执行更改检测.这可以使用setIsSlotFree()函数末尾的ChangeDetectorRef.detectChanges()来完成.

如果组件的构造函数是构造函数(私有http：HttpClient,私有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();        
  }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
点赞