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

Question

我有一個需求，我需要在具有樹狀結構的兩個容器之間實現拖放。 一個容器是 TODO，另一個容器是 Done。 它正在工作，但刪除的數據總是附加到容器 2（完成）的節點 1，因為我不知道如何找到刪除的容器節點索引？

這是代碼。 工作演示可以在這里找到

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 ”屬性來實現需求。

根據 angular 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 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 ”

下面是工作鏈接，如果有人需要這種實現，請參考下面的鏈接。 我希望這會節省一些人的時間。

拖放樹列表