ExpressionChangedAfterItHasBeenCheckedError: Ошибка выражения при извлечении значения Datepicker

Question

Я продолжаю получать эту ошибку, и я не могу найти способ исправить это. Я использовал этот angular 4 datepicker в моем проекте, и в этой ошибке возникает, когда он обнаруживает изменение в событии dateChanged.

Вот моя полная ошибка:

EditApplicationComponent.html: 522 Ошибка: ExpressionChangedAfterItHasBeenCheckedError: выражение изменилось после того как это было проверено. Предыдущее значение: [[Object Object] '. Текущий значение: ''.

Вот мой HTML.

<tr *ngFor="let rpr of DocumentMode">

<td style="width: 18%">

<my-date-picker name="from" [options]="DocDatePickerOptions" (dateChanged)="onDocDateChanged($event, rpr)" [ngModelOptions]="{standalone: true}" [placeholder]="placeholder"
            [ngModel]="rpr.SD_VALID_FROM" ></my-date-picker>
</td>
<tr>

Вот как я связал и получил значение для выбора даты. в sample.ts

OnInit(){

  this.DocDateRetreive();
}



DocDateRetreive() {
    console.log("came here", this.DocumentMode);
    for (var i = 0; i < this.DocumentMode.length; i++) {
      if (this.DocumentMode[i].SD_VALID_FROM == null) {
        // this.validFrom[i] = new Date();
      }
      else {
        console.log("from:", this.DocumentMode[i].SD_VALID_FROM);

        var validFromTemp = [new Date(this.DocumentMode[i].SD_VALID_FROM)];

        for (var j = 0; j < validFromTemp.length; j++) {
          console.log("valid from temp:", validFromTemp[j]);
          this.validFrom[i] = { date: { year: validFromTemp[j].getFullYear(), month: validFromTemp[j].getMonth() + 1, day: validFromTemp[j].getDate() } };
        }
        console.log("valid", this.validFrom[i]);
        this.DocumentMode[i].SD_VALID_FROM = this.validFrom[i];
      }
    }
  }


  onDocDateChanged(event: IMyDateModel, rpr) {

      var date = event.formatted;
      rpr.SD_VALID_FROM = date;
      console.log("changed", rpr.SD_VALID_FROM);

  }


readThis(inputValue: any, rpr): void {

      myReader.onloadend = (e) => {
        this.FileString = myReader.result;
        // rpr.SD_VALID_FROM = this.validFrom.formatted;
        for (var i = 0; i < this.DocumentMode.length; i++) {
          if (this.DocumentMode[i].DOC_ATTCHE_PATH == rpr.DOC_ATTCHE_PATH) {

            this.DocumentMode[i].SD_VALID_FROM = rpr.SD_VALID_FROM.formatted;
            this.DocumentMode[i].SD_VALID_UNTIL = rpr.SD_VALID_UNTIL;
            this.DocumentMode[i].IS_CHECK = true;
          }
        }
      }
      myReader.readAsDataURL(file);

  }

Datepicker работает нормально, но при первой загрузке DOM происходит ошибка. Как мне решить эту проблему. Помощь будет оценена.

Answer 1

Попробуйте сделать это this.DocDateRetreive(); после просмотра init. есть угловой хук жизненного цикла, который называется AfterViewInit. Вам необходимо реализовать интерфейс в вашем классе компонентов.

export class YourComponent implements AfterViewInit{
constructor(){
/*Whatever*/
}

    ngAfterViewInit(): void{
    this.DocDateRetreive();
    }
}

Это должно решить вашу проблему.

Если входящие данные, которые вы используете, создают проблему, то вам нужно пойти на AfterContentInit

export class YourComponent implements AfterContentInit {
    constructor(){
    /*Whatever*/
    }

        ngAfterContentInit (): void{
        this.DocDateRetreive();
        }
    }