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="{{table._id}}"
(cdkDragEnded)="dragEnd($event, table)"
(click)="orderScreen(table)"
[cdkDragFreeDragPosition]="getTablePosition(table)">{{table.username}}
</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();
}
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.
Try to use a timeup in your function getAllTables like this example: ngAfterViewInit() { setTimeout(() => { this.paginator.page.pipe( startWith(null), tap(() => this.dataSource.loadLessons(...)) ).subscribe(); }); }
ngAfterViewInit() { setTimeout(() => { this.paginator.page.pipe( startWith(null), tap(() => this.dataSource.loadLessons(...)) ).subscribe(); }); }
Found out why, the reason was I was passing a method in the below code. Once I changed to a variable, it was fixed
[cdkDragFreeDragPosition]="getTablePosition(table)"
I had simmilar error message if using service with ids.
cdkDropList [cdkDropListConnectedTo]="cdkIdsService.ids"
cdkIdsService
. ids
changes are comming only after all Subjects and http and etc finishes work, and in the end I had next error:
ExpressionChangedAfterItHasBeenCheckedError previousValue "id1,id2" current "articleId"
Solution is to add changeDetection
to the component, and issue is gone.
changeDetection: ChangeDetectionStrategy.OnPush,
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.