出现ExpressionChangedAfterItHasBeenCheckedError错误

Question

我正在使用角度应用程序，但遇到以下错误：

ExpressionChangedAfterItHaHasBeenCheckedError：检查表达式后，表达式已更改。先前的值：“ ng-untouched：true”。当前值：“ ng-untouched：false”。

我有一个看起来像这样的输入字段：

<input matInput type="text" [(ngModel)]="description" #descriptionInput />
{{ descriptionInput.focus() }}

我的组件看起来像这样：

@Component({
  selector: 'app-watermelon-dialog',
  templateUrl: './watermelon-dialog.component.html',
  styleUrls: ['./watermelon-dialog.component.scss']
})
export class WatermelonDialogComponent extends GeneralDialogComponent implements OnInit {

  public description : string;

  constructor(
    public dialogRef: MatDialogRef<GeneralDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public dialogData: GeneralDialogModel,
    ngDynFormService: DynamicFormService,
    public generalDialogService: GeneralDialogService) {
      super(dialogRef,
        dialogData,
        ngDynFormService,
        generalDialogService);
  }

  ngOnInit() {
    this.description = this.dialogData.extra;
  }
}

有人知道我为什么会遇到这个错误吗？我该如何摆脱呢？谢谢。