如果在Angular中使用拖放功能,但是MAT预览未显示,可能有以下几个原因和解决方法:
import { DragDropModule } from '@angular/cdk/drag-drop';
@NgModule({
imports: [
// 其他模块...
DragDropModule
],
// ...
})
export class YourModule { }
cdkDrag
和cdkDrop
。拖动的元素
放置区域
你也可以在组件类中处理拖放事件:
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
@Component({ ... })
export class YourComponent {
onDrop(event: CdkDragDrop) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
}
}
/* 在styles.css或者其他样式文件中引入 */
@import '~@angular/cdk/overlay-prebuilt.css';
@import '~@angular/cdk/drag-drop-prebuilt.css';
/* 或者在angular.json中的styles数组中引入 */
"styles": [
"node_modules/@angular/cdk/overlay-prebuilt.css",
"node_modules/@angular/cdk/drag-drop-prebuilt.css",
// 其他样式...
]
通过检查上述问题并采取相应的措施,你应该能够解决MAT预览未显示的问题。