Angular ExpressionChangedAfterItHasBeenCheckedError:表达式在检查后已更改。光盘

123

我试图以角度使用cdkDragDropModule创建表布局,我从数据库中获取表对象,并将表对象预加载到拖放容器中的正确位置。一切正常,但出现以下错误:

ServerOrderComponent.html:13 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'freeDragPosition: [object Object]'. Current value: 'freeDragPosition: undefined'.
at viewDebugError (core.js:23059)
at expressionChangedAfterItHasBeenCheckedError (core.js:23047)
at checkBindingNoChanges (core.js:23257)
at checkNoChangesNodeInline (core.js:31601)
at checkNoChangesNode (core.js:31586)
at debugCheckNoChangesNode (core.js:32183)
at debugCheckDirectivesFn (core.js:32115)
at Object.eval [as updateDirectives] (ServerOrderComponent.html:13)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:32108)
at checkNoChangesView (core.js:31485)

我的component.html是

 <div class="example-boundary">
<div class="example-box"
     cdkDragBoundary=".example-boundary"
     cdkDrag
     [cdkDragStartDelay]="2000"
     *ngFor="let table of tables"
     id="{{table._id}}"
     (cdkDragEnded)="dragEnd($event, table)"
     (click)="orderScreen(table)"
     [cdkDragFreeDragPosition]="getTablePosition(table)">{{table.username}}
</div>

并且component.ts是

tables: User[] = [];
  loading = true;
  dragPosition: any;
  tableMoved = false;
  firstEntry = true;
  initializedTables: string[] = [];

  constructor(private router: Router, private userService: UserService, private alertService: AlertService, private cartService: CartService, private cdr: ChangeDetectorRef) {
  }

  ngAfterViewInit() {
    this.getAllTables();
    this.cartService.removeAllFromCart();
  }

 
  getTablePosition(table: User) {
    if(!this.initializedTables.includes(table.uuid)) {
      this.initializedTables.push(table.uuid);
      return {x: table.posX, y: table.posX};
    }
  }

  dragEnd($event: CdkDragEnd, table: User) {
    const { x, y } = $event.distance;
    table.posX =  x;
    table.posY =  y;
    this.tableService.update(table).subscribe(() => {
    },
      error => {
        this.alertService.error(error);
        this.loading = false;
      });
  }


  orderScreen(table: User) {
    if (this.tableMoved) {
      this.tableMoved = false;
    } else {
      return 
    }
  }

我已经尝试了一切,但似乎无法使它消失。

123

找出原因,原因是我在下面的代码中传递了一个方法。一旦我更改为变量,它便已修复

[cdkDragFreeDragPosition]="getTablePosition(table)"

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Angular 中的“ExpressionChangedAfterItHasBeenCheckedError:检查后表达式已更改”错误

来自分类Dev

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

来自分类Dev

Angular2更改检测“检查后表达式已更改”

来自分类Dev

Angular2-双向绑定错误:检查表达式后,表达式已更改

来自分类Dev

Angular2:嵌套* ngFor导致“检查后,表达式已更改”

来自分类Dev

Angular2 ngClass文档和表达式“ setClasses()”在检查异常后已更改

来自分类Dev

检查后,Angular2 RC2表达式已更改。

来自分类Dev

带有ngmodel的Angular 2动态表单示例导致“检查后表达式已更改”

来自分类Dev

更新表单值时,Angular2(beta3)“检查后表达式已更改”

来自分类Dev

Angular2-检查后表达式已更改-使用调整大小事件绑定到div宽度

来自分类Dev

Angular 2“检查后,表达已更改”

来自分类Dev

错误错误:ExpressionChangedAfterItHasBeenCheckedError:检查表达式后,表达式已更改。角度的

来自分类常见问题

ExpressionChangedAfterItHasBeenCheckedError:表达式在检查后已更改。上一个值:'undefined'

来自分类Dev

ExpressionChangedAfterItHasBeenCheckedError:表达式在检查后已更改。上一个值:'undefined'异常

来自分类Dev

面对“ ExpressionChangedAfterItHasBeenCheckedError:表达式在检查后已更改”以显示/隐藏加载程序

来自分类Dev

ngu-carousel :: ExpressionChangedAfterItHasBeenCheckedError:检查后表达式已更改

来自分类Dev

如何在不触发“检查表达式后更改表达式”的情况下在Angular 2上实现ngOnChanges以进行输入验证。错误

来自分类Dev

角度-表达式在检查后已更改。先前值

来自分类Dev

如何检查Angular2表达式中的isNaN?

来自分类Dev

更改动态颜色-ExpressionChangedAfterItHaHasBeenCheckedError:检查表达式后,表达式已更改

来自分类Dev

Angular 2材质:使用mdInput更改“ [..]表达式”

来自分类Dev

angularjs 2 rc4更改检测:表达式在检查后已更改

来自分类Dev

angularjs 2 rc4更改检测:表达式在检查后已更改

来自分类Dev

使用moment.js的角度“检查错误后表达式已更改”

来自分类Dev

从Angular表达式访问窗口

来自分类Dev

Angular js中的嵌套表达式

来自分类Dev

在Angular表达式中嵌套引号

来自分类Dev

Angular指令中的多个“或”表达式

来自分类Dev

Angular2表达式+ jQuery

Related 相关文章

  1. 1

    Angular 中的“ExpressionChangedAfterItHasBeenCheckedError:检查后表达式已更改”错误

  2. 2

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

  3. 3

    Angular2更改检测“检查后表达式已更改”

  4. 4

    Angular2-双向绑定错误:检查表达式后,表达式已更改

  5. 5

    Angular2:嵌套* ngFor导致“检查后,表达式已更改”

  6. 6

    Angular2 ngClass文档和表达式“ setClasses()”在检查异常后已更改

  7. 7

    检查后,Angular2 RC2表达式已更改。

  8. 8

    带有ngmodel的Angular 2动态表单示例导致“检查后表达式已更改”

  9. 9

    更新表单值时,Angular2(beta3)“检查后表达式已更改”

  10. 10

    Angular2-检查后表达式已更改-使用调整大小事件绑定到div宽度

  11. 11

    Angular 2“检查后,表达已更改”

  12. 12

    错误错误:ExpressionChangedAfterItHasBeenCheckedError:检查表达式后,表达式已更改。角度的

  13. 13

    ExpressionChangedAfterItHasBeenCheckedError:表达式在检查后已更改。上一个值:'undefined'

  14. 14

    ExpressionChangedAfterItHasBeenCheckedError:表达式在检查后已更改。上一个值:'undefined'异常

  15. 15

    面对“ ExpressionChangedAfterItHasBeenCheckedError:表达式在检查后已更改”以显示/隐藏加载程序

  16. 16

    ngu-carousel :: ExpressionChangedAfterItHasBeenCheckedError:检查后表达式已更改

  17. 17

    如何在不触发“检查表达式后更改表达式”的情况下在Angular 2上实现ngOnChanges以进行输入验证。错误

  18. 18

    角度-表达式在检查后已更改。先前值

  19. 19

    如何检查Angular2表达式中的isNaN?

  20. 20

    更改动态颜色-ExpressionChangedAfterItHaHasBeenCheckedError:检查表达式后,表达式已更改

  21. 21

    Angular 2材质:使用mdInput更改“ [..]表达式”

  22. 22

    angularjs 2 rc4更改检测:表达式在检查后已更改

  23. 23

    angularjs 2 rc4更改检测:表达式在检查后已更改

  24. 24

    使用moment.js的角度“检查错误后表达式已更改”

  25. 25

    从Angular表达式访问窗口

  26. 26

    Angular js中的嵌套表达式

  27. 27

    在Angular表达式中嵌套引号

  28. 28

    Angular指令中的多个“或”表达式

  29. 29

    Angular2表达式+ jQuery

热门标签

归档