入力テキストから（keyup.enter）を使用してモーダルを表示する場合は、Error：ExpressionChangedAfterItHasBeenCheckedError

Question

を使用して、角度4とブートストラップ4（v4α、ng-bootstrap）のビジュアルコードを使用します。

いくつかの数値の入力が終了し、フォーカスを失うことなく（モダルを表示するために）Enterキーを押すと、問題が発生します。モーダルで表示されますが、コンソールにはエラーが表示されます。 （エラー：ExpressionChangedAfterItHasBeenCheckedError）とそのエラーが入力テキストから来ていると指摘：

<div class="form-group" 
     [ngClass]="{'has-error': (numeroDocuVar.touched 
     ||numeroDocuVar.dirty) && !numeroDocuVar.valid }"> 
     <div class="form-group"> 
      <div class="input-group"> 
       <input class="form-control" id="numeroDocuId" 
         type="text" placeholder="Numero documento (requerido)" 
         [(ngModel)]="IdNumeroDocu" name="numeroDocu"                 
         #numeroDocuVar="ngModel" 
        (keyup.enter)="onSearchDocumento(numeroDocuVar.value)" 
         required /> 
       <span class="input-group-addon fa fa-search" 
         (click)="onSearchDocumento(numeroDocuVar.value)" 
         style="cursor:pointer"> 
       </span> 
      </div> 
    </div> 
</div> 

私はngAfterContentInitを使用してそれを行うことができますことを読んだが、この変数は計算によって満たされていない、それはいっぱいユーザーズ入力テキスト内の情報

私はng-bootstrapモーダルコードを使用します。

ありがとうございました。

Answer 1

このエラーは実稼動ビルドには表示されません。そのため、最悪の場合は無視できます。しかし、さまざまな状況で発生する可能性があり、ユーザーの入力による状態/ビューの変更は間違いなく一般的なものです。

まず、デフォルトのchangeDetectionモードを使用していて、 'OnPush'モードを使用していないことを確認してください。あなたが構築した自分のアプリケーションでどこの設定も変更していない場合は、デフォルトの変更検出モードを使用しているので、あなたはうまくいきます。

テンプレートでkeyupイベントに手動でバインドするのではなく、入力をNgForm要素にラップし、onSearchDocumentoメソッドを呼び出すコンポーネントコードにsubmitメソッドを配置できます。これは恐らくエラーを防ぎ、ややクリーンなテンプレートを作るでしょう。

<form #formName="ngForm" (ngSubmit)="onSearchDocumento(formName)"> 
    ... input and other elements ... 
</form> 

NgFormを使用している場合、サブミットメソッドはユーザーがEnterキーを押すのを自動的に聞き取ります。それが「doesnの場合

formName.numeroDocuVar.val 

をそれは「formNameフォーム」という名前のオブジェクトとして（あなたの場合には一つだけ入力すると思われる）フォーム全体の内容を通過すると、あなたはそれらの識別子を持つ個々のフォーム部分にアクセスすることができ、すなわち

ChangeDetectorRefをインポートし、他のメソッドの処理を続行する前に、その変更をdetectChanges（）メソッドを使用して強制的にチェックする必要があるかもしれません。ような何か - あなたのコンポーネントで

import { ChangeDetectorRef ... your other imports.... } from '@angular/core' 

：

constructor(private cdr: ChangeDetectorRef) { ... 

し、検索方法でdetectChangesの呼び出しを追加：

onSearchDocumento(...) { 
    this.cdr.detectChanges(); 
    // rest of method // 
} 

Answer 2

私は同じ問題を抱えていました。 これを解決するには、モーダルウィンドウを呼び出す前にフォーカスを削除する必要があります。

constructor(private modalService: NgbModal, private elRef: ElementRef, private renderer: Renderer) {}  
this.renderer.invokeElementMethod(this.elRef.nativeElement.ownerDocument.activeElement, 'blur'); // put this line before you call your modal in the component 
this.modalRef = this.modalService.open(this.modalNotification); 

または、ngOnInitに触れたような入力を確認する必要があります。

この問題についてhereを読むことができます。