Angular material expressionChangedTerithasBeenCheckedError:模式上升和设置特性数据后

我有一个ngModal弹出窗口和一个有3个控件的表单。其中一个控件是自动完成； 我试图在弹出窗口打开后填充数据。这里的要点是使用角度材质控件会导致发生异常。当我移除控件并打开弹出窗口时，一切都很顺利。 这里是确切的错误

消息：“NG0100:ExpressionChangedTerithasBeenCheckedError:检查后，表达式已更改。“mat focused”的上一个值：“false”。当前值：“true”

当从父级调用ngModal时，单击按钮是这样的

 const modalRef = this.modalService.open(CoinInsertModalComponent);
modalRef.componentInstance.coinAdded.subscribe((val: boolean) => {
  if (val) {
  //  this.getCoins();
  }
});

模态HTML是

    <form class="pt-3" #f="ngForm" [formGroup]="coinForum" (ngSubmit)="addCoin()">
  <div class="form-group">
    <mat-form-field>
      <mat-label>Coin</mat-label>
      <input type="text" placeholder="Coin Seç" aria-label="Number" matInput formControlName="coinSelectControl"
        [matAutocomplete]="auto">
      <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
        <mat-option *ngFor="let option of filteredOptions | async " [value]="option.pair">
          {{option.pair}}
        </mat-option>
      </mat-autocomplete>
    </mat-form-field>
  </div>
  <div class="form-group">

     <mat-form-field class="form-group">
      <mat-label>Alınan Mikdar</mat-label>
      <input formControlName="coinAmountControl" matInput placeholder="örn. 15.56" type="number">
    </mat-form-field>
  </div>
  <div class="form-group">
    <mat-form-field class="form-group">
      <mat-label>Alım Fiyatı</mat-label>
      <input formControlName="coinPriceControl" matInput placeholder="örn. 0.002346" type="number">
    </mat-form-field>
  </div>
  <div class="modal-footer">
    <button [disabled]="!f.valid" type="submit" class="btn btn-sm btn-success"><i
        class="fas fa-check"></i>Kaydet</button>
    <button class="btn btn-primary btn-sm" (click)="activeModal.dismiss('After Open')"><i
        class="fas fa-times"></i>İptal</button>

  </div>
</form>

}

}

}

如果有任何额外的信息需要解决这个问题，请写在评论中，我会直接更新问题。

---

提前感谢您的帮助

您需要在打开弹出模式时手动告知Angular发生了更改

Angular有一种机制可以听到这些变化。这是一个ChangeDetectorRef服务

使用ChangeDetectorRef服务检测新的更改。将其注入构造函数，如下所示：

constructor (private cdRef: ChangeDetectorRef) {}

---

通过

this.cdRef.detectChanges（）

检测更改，这应该对您有用。

您不希望我在模式的哪个生命周期上注入它。我试过了，但没有成功！在ngAfterViewInit（）生命周期钩子中尝试它。

 ngOnInit(): void {
const pairs = localStorage.getItem('pairs');
if (pairs) {
  if (new Date((JSON.parse(pairs)).getTime).getDate() !== (new Date()).getDate()) {
    this.getPairs();
  } else {
    this.options = JSON.parse(pairs).pairs;
  }
} else {
  this.getPairs();
}
this.filteredOptions = this.coinForum.controls.coinSelectControl.valueChanges.pipe(
  startWith(''),
  map(value => this._filter(value))
);

private _filter(value: string): string[] {
const filterValue = value.toLowerCase();
return this.options.filter((option: any) => option.pair.toLowerCase().indexOf(filterValue) === 0);

constructor (private cdRef: ChangeDetectorRef) {}