angular - 特定 json 元素的拖放区域 *ngFor

Question

使用角度材料 cdk 的拖放功能，我想为每个 json 元素实现 drop ara

html

    <div class="todo-container column-container">
      <div class="list"
           cdkDropList
           #todoList="cdkDropList"
           [cdkDropListData]="todos"
           [cdkDropListConnectedTo]="[doneList]"
           (cdkDropListDropped)="onDrop($event)">
        <h2>Tech to learn</h2>
        <mat-card *ngFor="let todo of todos" cdkDrag>
          <mat-card-header>
            <mat-card-subtitle>{{todo.category}}</mat-card-subtitle>
          </mat-card-header>
        </mat-card>
      </div>
    </div>

    <div class="done-container column-container">
      <div class="list"
           cdkDropList
           #doneList="cdkDropList"
           [cdkDropListData]="completed"
           [cdkDropListConnectedTo]="todoList"
           (cdkDropListDropped)="onDrop($event)">
        <h2>Tech learned</h2>
        <mat-card *ngFor="let complete of completed" cdkDrag>
          <mat-card-header>
            <mat-card-title>{{complete.name}}</mat-card-title>
          </mat-card-header>
        </mat-card>
      </div>
    </div>

  </div>

ts

todos = [
    {
      name: 'Angular',
      category: 'Web Development'
    },
    {
      name: 'Flexbox',
      category: 'Web Development'
    },
    {
      name: 'iOS',
      category: 'App Development'
    },
    {
      name: 'Java',
      category: 'Software development'
    }
  ];

  completed = [
    {
      name: 'Android',
      category: ''
    },
    {
      name: 'MongoDB',
      category: ''
    },
    {
      name: 'React',
      category: ''
    }
  ];

  onDrop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data,
        event.previousIndex,
        event.currentIndex);
    } else {
      transferArrayItem(event.previousContainer.data,
        event.container.data,
        event.previousIndex, event.currentIndex);
    }
  }

首次加载：

拖放后：

拖放工作正常，但我需要以不同的方式进行。我需要将区域从“completed.name”删除到特定键。如果有任何东西从“待办事项”拖放到放置区域，它应该将类别添加到该特定键。这意味着我需要每个标签“名称”应该有一个放置区域部分到该特定名称

例如，如果我将应用程序开发拖放到“ios”旁边，该应用程序开发将添加到名称为“ios”的 json

并且放置区域和标签应该并排，如下所示

删除完成后的输出json应该是：

completed = [
        {
          name: 'Android',
          category: 'App Development'
        },
        {
          name: 'MongoDB',
          category: 'web development'
        },
        {
          name: 'React',
          category: 'software development'
        }
      ]

标签： angularangular-materialdrag-and-dropangular8angular-cdk-drag-drop