在滚动之前，DOM未在Angular中更新

Question

我的组件中包含拖放指令。它通过修改数组来工作，在这个过程中，我也手动修改数组。

问题是，只有在我从同一页面上的实际视图中滚出并再次返回时，DOM才会更新。然后一切都应该如此。

这种行为有没有立即解释？有没有办法强制更新呢？

感谢。

我会尝试添加一些代码并查看它是否有意义：

  dropDnD(e, day, employment: EmploymentDto, employee: EmployeeDto) {
    this.activeSource = e.value;
    this.activeTarget = { day: day, employment: employment, employee: employee };
this.copyWatch();
  }
  dragDnD($event, employee: EmployeeDto, day, index) {
    this.activeSourceDay = (+day - 1);
    this.activeSourceArrayIndex = index;
    this.activeSourceWatch = $event.value;
    this.activeSourceEmployee = employee;
    this.activeSourceWatchDay = this.employees[0].employments[0].watchDays[4].watches;
  }

  copyWatch() {
        this.planningTable.loadingIndicator = true;
        const sourceEmp = this.employees.find(x => x.employeeId === this.activeSourceEmployee.employeeId);
        const sourceIndex = this.employees.indexOf(sourceEmp);
        const sourceEmployment = sourceEmp.employments[0];
        const newDate = JSON.parse(JSON.stringify(new Date(Number(this.selectedYear.id), Number(this.selectedMonth.id) - 1, this.activeTarget.day, 0, 0, 0, 0)));

    this.planService.copyRealisedWatch(this.activeSource.plannedWatchId, this.activeSource.realisedWatchId, this.activeTarget.employment.employmentId, newDate, Number(this.selectedYear.id + this.selectedMonth.id)).subscribe(res => {
        const refreshedEmp = this.employees.find(x => x.employeeId === res.employeeId);
        this.employees[0].employments[0].watchDays[this.activeSourceDay].watches = [];

        const index = this.employees.indexOf(refreshedEmp);

      res.multiplier = this.getRowHeightMultiplier();
      this.employees[index] = res;
}

和html

 <div ngxDroppable
      [copy]="false"
      dropZone="watch-target-container"
      (drop)="dropDnD($event, column.name, row['employments'][0], row)">

  <div *ngFor="let watch of getDayWatches(row['employments'][0], column.name); let i = index;"
        [style.background-color]="getBackGroundColor(watch, false)"
        [style.color]="getWatchMostReadableColor(watch, false)"
        class="watchcode"
        [contextMenu]="watchMenu"
        [contextMenuSubject]="{watch: watch, employee: value}"
        ngxDraggable="watch-target-container" [model]="watch" (drag)="dragDnD($event, row, toNumber(column.name), i)">
    <div *ngIf="watch.ownedByUser && !watch.closed && !watch.approved">
      <div>{{column.name}}
        <span *ngIf="watch.rejected">!</span>
        <i class="fa fa-arrows move" aria-hidden="true" ngxDragHandle></i>
        <p class="code" *ngIf="showWatchDetails.code">{{i}} {{watch != null ? watch.code : ""}}</p>
        <div [style.background-color]="getBackGroundColor(watch, true)" [style.color]="getWatchMostReadableColor(watch, true)">
          <p *ngIf="showWatchDetails.subcode">gg{{watch != null ? watch.subCode : ""}}</p>
          <p *ngIf="showWatchDetails.time">gg{{watch != null ? watch.timeDesc : ""}}</p>
        </div>
      </div>
      <button *ngIf="watch.ownedByUser && !watch.closed && !watch.approved" class="close" (click)="removeRealisedWatch(value, watch.plannedWatchId, watch.realisedWatchId)"><span aria-hidden="true">&times;</span></button>
    </div>
    <div *ngIf="!(watch.ownedByUser && !watch.closed && !watch.approved)">
      <div>
        <span *ngIf="watch.rejected">!</span>
        <span style="padding:0;margin:0;height:0;z-index:-300;" ngxDragHandle></span>
        <p *ngIf="showWatchDetails.code">hh{{watch != null ? watch.code : ""}}</p>
        <div [style.background-color]="getBackGroundColor(watch, true)" [style.color]="getWatchMostReadableColor(watch, true)">
          <p *ngIf="showWatchDetails.subcode">hh{{watch != null ? watch.subCode : ""}}d</p>
          <p *ngIf="showWatchDetails.time">hh{{watch != null ? watch.timeDesc : ""}}e</p>
        </div>
      </div>
      <button *ngIf="watch.ownedByUser && !watch.closed && !watch.approved" class="close" (click)="removeRealisedWatch(value, watch.plannedWatchId, watch.realisedWatchId)"><span aria-hidden="true">&times;</span></button>
    </div>
  </div>
  <input style="width: 100%; padding: 2px;"
          [(ngModel)]="row['employments'][0].watchDays[toNumber(column.name) - 1].currentWatchCodeSearch"
          [typeahead]="watchTemplates"
          (typeaheadOnSelect)="typeaheadOnSelect($event, row, row['employments'][0], toNumber(column.name))"
          (typeaheadNoResults)="changeTypeaheadNoResults($event,row['employments'][0].watchDays[toNumber(column.name) - 1].currentWatchCodeSearch)"
          [typeaheadOptionsLimit]="20"
          [typeaheadItemTemplate]="customItemTemplate"
          [typeaheadOptionField]="'code'"
          placeholder=""
          container="body"
          class="form-control" />
</div>