Angular expressionChangedTerrithasBeenCheckedError在对话框中预选被动表单时出现异常

我试图实现一个带有反应式表单的对话框，带有动态表单数据初始化。 该对话框位于子组件中，由我的主组件触发

当我尝试预选/填写表单组件时，我遇到以下错误：

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

只有当我用一个值预选nb datepicker组件时，问题才会出现，如果使用null作为值，一切都正常

这是我的密码：

主要成分

<i (click)="editdialog.bookingToEdit(booking)" class="fas fa-edit"></i>
....
<ngx-booking-edit #editdialog></ngx-booking-edit>

....

带有对话框的子组件

@Component({
  selector: 'ngx-booking-edit',
  templateUrl: './booking-edit.component.html',
  styleUrls: ['./booking-edit.component.scss'],
})
export class BookingEditComponent implements AfterViewInit {

  @Output() updateBookingData = new EventEmitter<Booking>();
  @ViewChild('dialogedit') editDialog: TemplateRef<any>;

  private initialData: InitialDataResponse;
  private booking: Booking;
  public bookingForm: FormGroup;
  public newContractPartner = false;

  constructor(private formBuilder: FormBuilder,
              private  dialogService: NbDialogService,
              private initialDataService: InitialDataService,
              private toasterService: ToasterService) {
  }

  ngAfterViewInit() {
    this.loadInitData();

  }

  private loadInitData() {

    // REST call init data
    this.initialDataService.getInitalData()
      .map(resp => resp)
      .subscribe(
        (data) => {
          this.initialData = data.body;
        },
        (err) => {
          console.error('status', err.status);
        },
      );
  }

  //this method is called from the main component with an booking object
  bookingToEdit(bookingToEdit: Booking) {
    this.booking = bookingToEdit;
    this.initForm();

    this.dialogService.open(this.editDialog, {});
  }

  private initForm() {

    const today: Date = new Date();
    this.bookingForm = this.formBuilder.group({
      description: [this.booking.description, [Validators.required, MyValidators.nospaceValidator]],
      amount: [this.booking.amount, [Validators.required, MyValidators.validateAmount]],
      date: [today, Validators.required],
      capitalSource: [this.booking.capitalSource.id, Validators.required],
      category: [this.booking.subcategory.id, Validators.required],
      contractpartner: [this.booking.contractPartner.name, [Validators.required, MyValidators.nospaceValidator]],
      privatCheckbox: [this.booking.privatBookingOfUser],
    });

  }


}

@组件({
选择器：“ngx预订编辑”，
templateUrl:'./booking edit.component.html'，
样式URL:['./booking edit.component.scss']，
})
导出类BookingEditComponent在ViewInit之后实现{
@Output（）updateBookingData=neweventemitter（）；
@ViewChild（'dialogedit'）editDialog:TemplateRef
在更改后显式运行
更改检测
。请在组件中添加此代码片段，这将解决您的问题

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdRef:ChangeDetectorRef) {}

ngAfterViewChecked()
{
  this.cdRef.detectChanges();
}

角度文档链接=>

GitHub issue=>
在更改后显式运行
更改检测
。请在组件中添加此代码片段，这将解决您的问题

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdRef:ChangeDetectorRef) {}

ngAfterViewChecked()
{
  this.cdRef.detectChanges();
}

角度文档链接=>

GitHub issue=>
您好，这并不能解决问题，错误仍然会发生。@DennisG.您对主组件和子组件都做了这些更改吗？现在我也将其添加到主组件中，仍然会得到相同的错误。我使用“@angular/core”：“^8.0.0”。这可能是星云日期选择器内部的一个错误，因为我只有在预填充此组件时才会出现错误？所有其他表单组件工作正常。我可以通过首先使用null初始化datepicker表单控件来解决此问题，并且在打开对话框后，在超时时间内调用patchValue。但仍然不知道为什么我不能直接初始化控件带有日期对象。您好，这并不能解决问题，错误仍然存在。@DennisG。您对主组件和子组件都做了这些更改吗？现在我也将其添加到主组件中，但仍然会出现相同的错误。我使用“@angular/core”：“^8.0.0”。这可能是星云日期选择器内部的一个错误，因为我只有在预填充此组件时才会出现错误？所有其他表单组件工作正常。我可以通过首先使用null初始化datepicker表单控件来解决此问题，并且在打开对话框后，在超时时间内调用patchValue。但仍然不知道为什么我不能直接初始化带有日期对象的控件。