简体   繁体   English

angular2 form + async validation + ChangeDetectionStrategy.OnPush =没有视图刷新?

[英]angular2 form + async validation + ChangeDetectionStrategy.OnPush = no view refresh?

[angular2 RC4 + @angular/forms module] [angular2 RC4 + @ angular / forms module]

I have a component using OnPush change detection containing a FormGroup . 我有一个使用包含FormGroup OnPush更改检测的FormGroup This form contains a FormControl with an async validator. 此表单包含一个带有async验证器的FormControl

When the validation is complete (no more pending ), the view is not refresh. 验证完成后(不再pending ),视图不会刷新。 Only the input blur event makes view refresh.. 只有input模糊事件才能刷新视图。

If I remove the OnPush change detection, it works properly. 如果我删除OnPush更改检测,它可以正常工作。

This plunker demonstrates it . 这个plunker演示了它

Is it an angular bug or I'm doing something wrong? 这是一个有角度的错误还是我做错了什么?

Looks like you are missing the goal of using ChangeDetectionStrategy.OnPush . 看起来你错过了使用ChangeDetectionStrategy.OnPush的目标。

You don't have any @Input property or | async 您没有任何@Input属性或| async | async pipe on your component, but it is only point of updating the view state with this strategy - when Input property updated (in ideal with a new object). 组件上的| async管道,但它只是用这个策略更新视图状态 - 当Input属性更新时(理想情况下是一个新对象)。 So just get rid of it for current case 所以只是摆脱当前的情况

UPDATE UPDATE

if you still insist on using OnPush in this case, for expected behavior you should trigger change detection manually. 如果在这种情况下仍然坚持使用OnPush,对于预期的行为,您应该手动触发更改检测。

Add import {..., ChangeDetectorRef} from '@angular/core'; import {..., ChangeDetectorRef} from '@angular/core';添加import {..., ChangeDetectorRef} from '@angular/core'; and inject instance of it in constructor. 并在构造函数中注入它的实例。

In your method you have to add this: 在您的方法中,您必须添加:

 uniqueNameAsync(control: FormControl): Promise<{[key: string]:any}>{
   return new Promise(resolve => {
       setTimeout(() =>{
            resolve(null);
            this.changeRef.markForCheck();
      }, 500);
   });
 }

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用changeDetection:angular2中的ChangeDetectionStrategy.OnPush - How using changeDetection: ChangeDetectionStrategy.OnPush in angular2 我可以使用Angular2中的ChangeDetectionStrategy.OnPush更改组件吗 - Can I change the component using ChangeDetectionStrategy.OnPush in Angular2 使用ChangeDetectionStrategy.OnPush和异步管道的Angular 2 Observable不起作用 - Angular 2 Observable with ChangeDetectionStrategy.OnPush and async pipe are not working 错误时的 Angular observable 不会使用 ChangeDetectionStrategy.OnPush 刷新界面 - Angular observable on error does not refresh interface with ChangeDetectionStrategy.OnPush Angular:使用ChangeDetectionStrategy.OnPush进行模型侦听 - Angular: Model listening with ChangeDetectionStrategy.OnPush Angular 2中的ChangeDetectionStrategy.OnPush和Observable.subscribe - ChangeDetectionStrategy.OnPush and Observable.subscribe in Angular 2 使用 changeDetectionStrategy.onPush 检测 Angular 形式的变化 - detect changes in Angular forms with changeDetectionStrategy.onPush angular 2 变化检测和 ChangeDetectionStrategy.OnPush - angular 2 change detection and ChangeDetectionStrategy.OnPush angular2中的`changeDetection:ChangeDetectionStrategy.OnPush`是否仅在一个方向上起作用:top-&gt; bottom? - Does `changeDetection: ChangeDetectionStrategy.OnPush` in angular2 only works in one direction: top->bottom? 你会推荐 ChangeDetectionStrategy.OnPush 作为 Angular 2 中的默认 changeDetection 吗? - Would you recommend ChangeDetectionStrategy.OnPush as default changeDetection in Angular 2?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM