Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.4k views
in Technique[技术] by (71.8m points)

drag and drop - Can't bind to 'cdkDragFreeDragPosition' since it isn't a known property of 'div'

I have posted my code below. I am using angular DragDropModule and for some reason [cdkDragFreeDragPosition] is not working. it gives me the error shown below. I added DragDropModule to my ngModule as shown below. When I remove [cdkDragFreeDragPosition] tag, the drag drop works fine but once added it gives me the error shown below. [cdkDragStartDelay]="1000" also gives the same error. I don't know why this issue is occurring. tried to find a solution online but couldn't. Any help would be appreciated.

error

<div class="example-boundary">
<div class="example-box"
     cdkDragBoundary=".example-boundary"
     cdkDrag
     *ngFor="let table of tables"
     id="{{table._id}}"
     (cdkDragEnded)="dragEnd($event)"
     [cdkDragDisabled]="false"
     [cdkDragFreeDragPosition]="getTablePosition(table)"
     (cdkDragMoved)="dragMoved($event, table)">{{table.username}}
</div>
import { ServerOrderComponent } from './server-order/server-order.component';
import {DragDropModule} from '@angular/cdk/drag-drop';

@NgModule({
  imports: [
    MDBBootstrapModule.forRoot(),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
    BrowserModule,
    ReactiveFormsModule,
    HttpClientModule,
    routing,
    FormsModule,
    NotifierModule.withConfig(customNotifierOptions),
    HttpModule,
    MatIconModule,
    BrowserAnimationsModule,
    MatSidenavModule,
    MatCheckboxModule,
    MatFormFieldModule,
    MatTableModule,
    MatSortModule,
    MatDividerModule,
    MatButtonToggleModule,
    MatProgressSpinnerModule,
    NgMultiSelectDropDownModule.forRoot(),
    DragDropModule
  ],
  entryComponents: [],
  declarations: [
    AppComponent,
    ServerOrderComponent
  ],
  providers: [
  ],
  bootstrap: [AppComponent]
})

export class AppModule {
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

So after looking around a bit, I decided to upgrade to angular material 8 as i was using angular 7 which did not have support for that. After upgrading, it works fine.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...