Angular ExpressionChangedAfterItHasBeenCheckedError: выражение изменилось после проверки. cdkdrag

Я пытаюсь использовать cdkDragDropModule в angular для создания макета таблицы, получаю объект таблицы из базы данных и предварительно загружаю объект таблицы в нужное место в контейнере перетаскивания. Все работает нормально, но я получаю следующую ошибку:

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)

мой компонент.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>

и компонент .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 
    }
  }

Я пробовал все, но не могу заставить его уйти.


typescript angular angular8 angular-cdk-drag-drop
person z123    schedule 08.02.2021    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Попробуйте использовать timeup в вашей функции getAllTables, как в этом примере: ngAfterViewInit() { setTimeout(() => { this.paginator.page .pipe( startWith(null), tap(() => this.dataSource.loadLessons(...)) ).subscribe(); }); }

person vi calderon    schedule 08.02.2021

arrow_upward
0
arrow_downward

Выяснил, почему, причина заключалась в том, что я передал метод в приведенном ниже коде. Как только я перешел на переменную, она была исправлена

[cdkDragFreeDragPosition]="getTablePosition(table)"
person z123    schedule 08.02.2021