Угловой материал cdk drag drop: не удается привязать к 'cdkDragFreeDragPosition'

Я использую cdk перетаскивания материала angular (ссылка: https://material.angular.io/cdk/drag-drop/overview).

Перетаскивание работает нормально, но когда я пытаюсь установить его координаты x-y с помощью [cdkDragFreeDragPosition], появляется сообщение об ошибке:

compiler.js:1021 Uncaught Error: Template parse errors:
Can't bind to 'cdkDragFreeDragPosition' since it isn't a known property of 'div'. ("FreeDragPosition]="dragPosition" -->
<!-- [cdkDragFreeDragPosition]="{x:10, y:10}" -->

Вот мой модуль:

import { DragDropModule } from '@angular/cdk/drag-drop';
...
@NgModule({
    imports: [
    ...
    DragDropModule
...

export class AppModule { }

и component.html

<div cdkDrag [cdkDragFreeDragPosition]="{x:10, y:10}">
   content goes here...
</div>

Может ли кто-нибудь подсказать мне, где я допустил ошибку? Заранее спасибо...

Обновление: моя версия Angular - 6, а @angular cdk - 7.3.7


angular drag-and-drop angular-material console.log angular-cdk
person rb vishnu    schedule 28.12.2020    source источник
comment
можете ли вы предоставить Stackblitz, способный воспроизвести эту проблему?   -  person HDJEMAI    schedule 28.12.2020
comment
Ваш модуль также объявляет компонент?   -  person Alex    schedule 28.12.2020
comment
Привет @ HDJEMAI @ Alex, перетаскивание работает нормально. Проблема в том, что я устанавливаю его координаты вручную с помощью cdkDragFreeDragPosition. Я думаю, что проблема здесь в версиях. Я использую angular 6, а angular cdk - 7.3.7.   -  person rb vishnu    schedule 28.12.2020

Ответы (1)


arrow_upward
1
arrow_downward

Сообщение об ошибке правильное - в 7.3.7 не было cdkDragFreeDragPosition. Кажется, что это было впервые задокументировано в 8.2.3 - на самом деле не проверено в репозитории git, но обычно они довольно согласуются со своими документами. Так что вам нужно обновить до 8.2.3.

Желательно, чтобы основная версия CDK оставалась на одном уровне с версией Angular.

person TotallyNewb    schedule 30.12.2020
comment
спасибо @TotallyNewb за ответ. Позже я тоже понял, что это может быть из-за конфликтов версий. Поскольку я использую angular 6, другие версии CDK выше 7.3.7 не поддерживаются :( Поэтому я использовал свойство CSS transform, чтобы вручную установить координаты bedraggle, и это работает :) - person rb vishnu; 05.01.2021