javascript - html 元素属性和脚本值之间的数据绑定(bind)不同步

Question

问题描述:
有一个可用性日历显示一个人是否忙于特定时段(每天分为两个时段)。此状态存储在 isSlotFree 中 bool 二维数组(此数组的大小为 31 x 2)。最初，此数组中的所有值都初始化为 true。然后，向请求繁忙日期的服务器发出 http get 请求。一旦收到，函数 setIsSlotFree()被调用以将数组中的适当值设置为 false。在 View (HTML 文件)中有一个 <td>每个插槽的元素。这些元素中的每一个都根据存储在数组相关索引中的 bool 值更新它们的颜色(使用类样式)。问题是 html 页面没有反射(reflect)在调用 setIsSlotFree() 之后对数组所做的更改。函数。(即 html 元素仍然将所有值视为 true)。但是，当我在 get 请求后立即在控制台中打印数组时，它已将适当的值更改为 false。当触发任何事件时，只有 View 会更新为正确的值。这里有什么问题？

以下是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在日历中生成单元格。

Answer 1

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

如果组件的构造函数是 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();        
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>