Der Ausdruck hat sich nach der Überprüfung geändert. Vorheriger Wert: 'wahr'. Aktueller Wert: 'false' bei geöffnetem Kendodatepicker für Winkel im modalen Dialog

Question

Ich arbeite an eckigen 4 app. Ich habe eckig installiert - 4.0.3, bootstrap - 3.3.7, ng-bootstrap - 1.0.0-alpha.15, @ progress/kendo-angular-dateinputs -^1.0.3.

Ich öffne modalen Dialog, die innen Kendo-datepicker haben. Wenn ich auf offenem Datepicker-Symbol klicken habe ich Fehler:

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

Ich versuchte

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() { 

    } 
} 

hinzufügen, aber es hat nicht geholfen. Wenn ich kendo-datepicker nicht im modalen Dialog einfüge, funktioniert es gut.

Wo ist der Fehler in Kendo-Datepicker, ng-Bootstrap oder eckig? Und wie kann ich es lösen?

Wichtiger Hinweis Ich habe Theme auf meinem Projekt für Bootstrap v3, also kann ich nicht aktualisieren, Nag-Bootstrap auf die neueste Version, denn die neuesten Versionen für Bootstrap v4, korrigieren Sie mich, wenn ich falsch liege.

Answer 1

Sie können versuchen, für Angular DateInputs auf die neueste Version des Kendo UI Upgrade (derzeit 1.4.2) - der Datepicker scheint wie in einem Bootstrap 4 modal erwartet zu arbeiten:

<!-- 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