在检查错误后阻止表达式更改?

时间:2018-02-15 14:35:41

标签: angular

我知道为什么我得到了表达式更改在检查错误后我无法阻止它。

方案

我有一个具有ngxDatatable的Component我们操纵Datatable以根据某些条件占用div的宽度所发生的事情是数据网格的重新渲染因某些奇怪的原因而发生,因为它发生在同一个事件中环。所以我们最终做的是,当我们从datagrid组件中获取resize事件时,我们在自定义指令中捕获它并发出一个事件,然后调用datatable recalulate事件。 这使得重新渲染问题消失,但随后出现了表达式检查问题。

这里watchValueChange是指令输入和选择器,网格是ngx数据表组件,其中容器Div是整个父div的视图Child:e h-1oo

问题是偏移宽度在cd可以作用于它之前变化太快而导致错误。我试图在组件中使用Observable.of来获取最新的值,而不是采取所有的更改值,但没有任何工作,请帮助

我尝试了什么

@Directive({
  selector: '[watchValueChange]'
})
export class watchDirective {

  @Output() onValueChange = new EventEmitter<any>();
  @Input('watchValueChange') public valueChange: any = null;

  private changeEvent: Subject<any> = new Subject<any>();

  constructor(private elRef: ElementRef) {}

  ngOnInit() {
    Observable.of(this.valueChange).debounceTime(100).subscribe(data => this.onValueChange.emit(data));
    /*this.changeEvent.asObservable().debounceTime(300).subscribe(value => {
      this.onValueChange.emit(value);
    });*/
  }

  ngOnChanges(changes){
    //this.changeEvent.next(this.valueChange);
  }
}

1 个答案:

答案 0 :(得分:0)

当事件触发文档更改检测时,本质上会发生此错误,然后,当该检测正在运行时,您会触发其他应触发更改的内容。但是,由于Angular目前正在运行更改检测,并且您在有机会完成之前更改了某些内容,因此您会收到该错误。有几种方法可以解决这个问题。我不太了解你的情况,想知道哪种方式最适合你。您可以更改逻辑,以便随后发生更改。或者您可以注入Angular的ChangeDetectorRef,然后在进行更改后使用markForCheck()方法,以便Angular知道再次检查更改。或者,您可以将更改设置为在setTimeout中发生,以便在Angular完成检查更改后强制进行更改,从而触发另一个更改检测周期。

constructor(private changeDetectorRef: ChangeDetectorRef) { }

更改后:

   ..method that causes change to DOM
    this.changeDetectorRef.markForCheck();

或:

setTimeout(() => {
  ..method that causes change to DOM:
}, 0);