Question

我使用带角度4和bootstrap 4的视觉代码（v4.alpha，ng-bootstrap）。

当你完成输入一些数字并按下输入而不会失去焦点（显示模态）时会出现问题，显示为模态，但在控制台中显示提到的错误。（错误：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

我遇到了同样的问题。要解决此问题，您应该在调用模态窗口之前删除焦点。

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。

Answer 2

生产版本中没有显示此错误...因此，如果情况更糟，您可以忽略它。它可能发生在很多不同的情况下，通过用户输入改变状态/视图绝对是一个常见的情况。

要做的第一件事是确保您使用默认更改检测模式，而不是使用＆＃39; OnPush＆＃39;模式。如果您构建了自己的应用，并且无法在任何地方更改这些设置，那么您正在使用默认的更改检测模式，这样您就可以了。

不是在模板中手动绑定到keyup事件，而是可以将输入包装在NgForm元素中，并将submit方法放在调用onSearchDocumento方法的组件代码中。这可能会防止错误，并可能使一个稍微更清洁的模板。

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

当您使用NgForm时，其提交方法会自动侦听用户按Enter键。这会将整个表单的内容（在您的情况下只是一个输入）作为名为＆＃39; formName＆＃39;的对象传递。并且您可以使用其标识符访问单个表单部分，即

  formName.numeroDocuVar.val

如果这不起作用，您可能必须导入ChangeDetectorRef并强制它使用其detectChanges（）方法检查更改，然后再继续使用其他方法。像 -

这样的东西

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

组件中的

：

constructor( private cdr: ChangeDetectorRef) { ...

然后在搜索方法中添加对detectChanges的调用：

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

Answer 3

我有一个类似的问题。我的解决方案是在打开模式之前手动模糊输入：

<input 
  ...
  (keyup.enter)="onSearchDocumento($event, numeroDocuVar.value)" 
/>

以及在组件类中（在打开模式之前）：

onSearchDocumento(event, val){
  event.target.blur();
  // ... rest of the method 
}

当从输入文本使用（keyup.enter）show modal时，抛出Error：ExpressionChangedAfterItHasBeenCheckedError

3 个答案: