Angular ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. cdkdrag

I am trying to use cdkDragDropModule in angular to create a table layout and i get the table object from the database and preload the table object in the correct spot in the drag drop container. Everything works fine but I get the following error:

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)  

my component.html is

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

and the component.ts is

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();    }      getAllTables() {      this.tableService.getAll().subscribe((tables) => {        this.tables = tables;        this.tables = _.filter(this.tables, function(o) {          return o.role === 'Table';        });        this.loading = false;      },        error => {          console.error(error);          this.loading = false;        });    }      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       }    }  

I have tried everything but cant seem toget it to go away.

https://stackoverflow.com/questions/66095080/angular-expressionchangedafterithasbeencheckederror-expression-has-changed-afte February 08, 2021 at 10:06AM