检查后表达式已更改。以前的值：“真”。当前值：在模态对话框中打开 kendo-datepicker 以获取角度的“false”

Question

我正在开发 Angular 4 应用程序。我已经安装了 angular - 4.0.3、bootstrap - 3.3.7、ng-bootstrap - 1.0.0-alpha.15、@progress/kendo-angular-dateinputs - ^1.0.3。

我打开了 kendo-datepicker 内部的模态对话框。当我点击打开日期选择器图标时出现错误：

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.

我尝试添加

import { Component, OnInit, OnDestroy, AfterViewChecked, AfterContentChecked, ChangeDetectorRef } from '@angular/core';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { FormGroup, FormBuilder, FormControl } from '@angular/forms';

@Component({
    selector: "ac-task-modal",
    templateUrl: "./app/core/modals/task-modal.component.html"
})
export class AddTaskModalComponent implements OnInit, OnDestroy, AfterViewChecked, AfterContentChecked {
    fromDate = new Date();
    dueDate? = new Date();
    taskForm: FormGroup;

    constructor(private ref: ChangeDetectorRef,
        public activeModal: NgbActiveModal,
        private modalService: NgbModal,
        private readonly formBuilder: FormBuilder) {
    }

    ngOnInit() {
        this.buildForm();
    }

    ngAfterViewChecked(): void {
        this.ref.detectChanges();
    }

    ngAfterContentChecked(): void {
        this.ref.detectChanges();
    }

    buildForm() {
        this.taskForm =
            this.formBuilder.group({
                description: this.task.description,
                note: "",
                assignee: new FormControl()
            });
    }

    ngOnDestroy() {

    }
}

但这没有帮助。 当我不在模态对话框中插入 kendo-datepicker 时，它工作正常。

kendo-datepicker、ng-bootstrap 或 angular 的错误在哪里？我该如何解决？

重要说明我的项目中有 bootstrap v3 的主题，所以我无法将 ng-bootstrap 更新到最新版本，因为 bootstrap v4 的最新版本，如果我错了，请纠正我。

Answer 1

您可以尝试将 Angular DateInputs 的 Kendo UI 升级到最新版本（当前为 1.4.2） - DatePicker 似乎在 Bootstrap 4 模式中按预期工作：

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Select a date:</p>
            <kendo-datepicker
                [(value)]="value"
            ></kendo-datepicker>
            <p>(use Alt+↓ to open the calendar, ← and →  to navigate, ↑ to increment and ↓ to decrement the value)</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

PLUNKER