如何从Angular2 +的mat-tree中的drop事件中获取mat-tree-node元素？

Question

我有一个需要在两个具有树状结构的容器之间实现拖放的要求。一个容器是TODO，另一个是完成。它正在工作，但是删除的数据始终会附加到容器2（完成）的节点1，因为我不知道如何找到删除的容器节点索引？

这是代码。可以使用的演示程序here

import './polyfills';

import {HttpClientModule} from '@angular/common/http';
import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatNativeDateModule} from '@angular/material';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {DemoMaterialModule} from './material-module';

import {TreeFlatOverviewExample} from './app/tree-flat-overview-example';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    DemoMaterialModule,
    MatNativeDateModule,
    ReactiveFormsModule,
  ],
  entryComponents: [TreeFlatOverviewExample],
  declarations: [TreeFlatOverviewExample],
  bootstrap: [TreeFlatOverviewExample],
  providers: []
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

拖动“其他”并放入“完成”容器中，现在打开节点1。您将能够看到被删除的元素。

要求：我想从TODO容器中拖动，并想放到容器2的确切节点中。 快速帮助将不胜感激。

Answer 1

好吧，最后，经过一些研究，我可以使用连接多个放置区域的“ div”和“ cdkDropListGroup ”属性来达到要求。

根据角度If you have an unknown number of connected drop lists, you can use the cdkDropListGroup directive to set up the connection automatically. Note that any new cdkDropList that is added under a group will be connected to all other lists automatically

在放置容器中，我无法使用mat-tree，因为这需要无法动态定义的数据源属性（到目前为止，我知道）。而在我的情况下，我希望动态地创建多个放置区，因此我使用了“ div ”

下面是工作链接，如果有人需要这种实现，请参考下面的链接。我希望这可以节省一些时间。

drag-n-drop-treelist