Angular 6-检查后表达式已更改

Question

我是angular的新手，并试图与easyui angular结合使用。

我在尝试打开/关闭对话框时发现此错误：

错误错误：ExpressionChangedAfterItHasBeenCheckedError：检查表达式后，表达式已更改。以前的值：'klass：l-btn f-inline-row f-content-center l-btn-small l-btn-focus'。当前值：'klass：l-btn f-inline-row f-content-center l-btn-small'。

这是我的代码。

user.component.html

<eui-linkbutton (click)="addAction()" iconCls="icon-add" style="margin-bottom:10px">Add New</eui-linkbutton>
<eui-datagrid 
  [data]="users" style="height1:250px" [filterable]="true" 
  [selectionMode]="'single'"
  [(selection)]="rowSelected"
  [euiContextMenu]="contextMenu"
  >

</eui-datagrid>


<!-- contextmenu -->
<eui-menu #contextMenu (itemClick)="contextClick($event)">
    <eui-menu-item value="edit" text="Edit"></eui-menu-item>
    <eui-menu-item text="Delete"></eui-menu-item>
    <eui-menu-item text="View"></eui-menu-item>
</eui-menu>


<eui-dialog #formDialog [closed]="closed" [draggable]="true" [modal]="true" [title]="isNewRow ? 'Add' : 'Edit'" (close)="closed=true">

  <div class="dialog-button">
    <eui-linkbutton [disabled]="!formObj.valid" (click)="saveAction()" style="width:80px">Save</eui-linkbutton>
    <eui-linkbutton (click)="formDialog.close()" style="width:80px">Cancel</eui-linkbutton>
  </div>
</eui-dialog>

user.component.ts

export class UserComponent implements OnInit {
  rowSelected = null;
  formObj: FormGroup;

  constructor(public userService: UserService, fb: FormBuilder){

    }

  get row(){
      return this.rowSelected;
  }
  set row(value: any){
      this.rowSelected = value;
      this.formObj.reset(this.rowSelected);
  }

  editAction(row){
    this.row = this.rowSelected;
    this.closed = false;
  }

  addAction(){
    console.log('open babe');
    this.row = {
      'id' : null,
      'username' : null,
      'password' : null,
      'email' : null,
      'first_name' : null,
      'last_name' : null
    };

    this.closed = false;
  }


  isNewRow = false;
  editingRow = null;
  closed = true;
  users: Object;

  currentSelection = null;
  ngOnInit() {
    this.userService.getData().subscribe(
      data => this.users = data
    ) 
    console.log('ngoninit');

    this.initRow();
    this.closed = true;
  }

  initRow() {
    this.editingRow = {
      username: null,
      password: null,
      email: null,
      first_name: null,
      last_name: null,
    };
  }

  onAddRow() {
    console.log('open babe');
    this.initRow();
    this.isNewRow = true;
    this.closed = false;
  }

  onEditRow(row) {
    this.isNewRow = false;
    this.editingRow = row;
    this.closed = false;
  }
   contextClick(value){
    if(!this.rowSelected){
      alert('Please select a row first!');
    }
    else{
      if(value == 'edit'){
        this.editAction(this.rowSelected);
      }
    }
  }
}

我搜索了许多教程来解决此问题，但似乎该教程的条件与我的不匹配。

我是否会误解或缺少一些有关角度的实用知识？更新属性的正确方法是什么？

Answer 1

在修改了一个Map正在迭代使用的对象后，我收到了这个错误

*ngFor="let entry of myMap.entries()"

对我有用的修复只是添加ChangeDetectionStrategy.OnPush到我的组件声明中：

@Component({
  selector: 'component',
  templateUrl: 'component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})

Answer 2

无法看到打开/关闭对话框代码。这里是对这个问题的解释。通常 Angular 会在 Change Detection 的帮助下根据 Model 对象更新 DOM。Angular 更新 DOM 并反映在 UI 中，之后模型也得到更新。

Angular 不知道需要做什么，所以报错。我们需要手动触发更改检测以反映 DOM。尝试将代码段包装在 setTimeout 块中

setTimeout(()=>{

});

Answer 3

使用ChangeDetectorRef服务来检测新更改

当视图使用OnPush（checkOnce）更改检测策略时，将视图明确标记为已更改，以便可以再次对其进行检查。

import { Component, Input, ChangeDetectionStrategy,ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'component',
  templateUrl: 'component.html',
  changeDetection: ChangeDetectionStrategy.OnPush

})


   constructor(cdRef:ChangeDetectorRef){} 
   ngAfterViewInit() {

     this.cdRef.detectChanges();
      }