无法在angular 2 typescript中拖动动态生成的网格

在Angular 2 TypeScript中，要实现拖动动态生成的网格，可以使用第三方库ngx-dnd（https://github.com/akserg/ng2-dnd）来实现。

ngx-dnd是一个基于Angular的拖放库，可以轻松地实现拖放功能。它提供了一组指令和事件，可以应用于动态生成的网格元素。

首先，你需要在你的Angular项目中安装ngx-dnd。可以通过以下命令使用npm进行安装：

npm install ng2-dnd --save

安装完成后，你需要在你的Angular模块中导入ngx-dnd模块：

import { DndModule } from 'ng2-dnd';

@NgModule({
  imports: [
    DndModule.forRoot()
  ]
})
export class YourModule { }

接下来，在你的组件中，你可以使用ngx-dnd提供的指令来实现拖放功能。首先，给动态生成的网格元素添加一个拖动指令：

<div [dragula]="'grid'" [dragulaModel]="gridItems" *ngFor="let item of gridItems">
  <!-- 网格元素的内容 -->
</div>

在上面的代码中，[dragula]="'grid'"指定了拖放的分组名称为'grid'，[dragulaModel]="gridItems"绑定了网格元素的数据模型。

然后，你可以在组件中定义一个数组来存储网格元素的数据模型：

gridItems: any[] = [
  // 初始化的网格元素
];

最后，你可以在组件中处理拖放事件，例如当网格元素被拖动时：

onDrag(item: any) {
  // 处理拖动事件
}

以上是在Angular 2 TypeScript中实现拖动动态生成的网格的基本步骤。通过使用ngx-dnd库，你可以轻松地实现拖放功能，并且可以根据实际需求进行定制和扩展。

腾讯云相关产品和产品介绍链接地址：

• 云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
• 云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
• 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
• 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/ioe
• 移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
• 对象存储（COS）：https://cloud.tencent.com/product/cos
• 腾讯区块链服务（TBaaS）：https://cloud.tencent.com/product/tbaas
• 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe