Angular 拖放;特定json元素的放置区域*ngFor

Angular 拖放;特定json元素的放置区域*ngFor,angular,angular-material,drag-and-drop,angular8,angular-cdk-drag-drop,Angular,Angular Material,Drag And Drop,Angular8,Angular Cdk Drag Drop,使用角度材质cdk的拖放功能,我希望为每个json元素实现拖放ara html 有人能帮我吗?我怎样才能做到这一点 <div class="todo-container column-container"> <div class="list" cdkDropList #todoList="cdkDropList" [cdkDropL

使用角度材质cdk的拖放功能,我希望为每个json元素实现拖放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>
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: 'Android',
          category: 'App Development'
        },
        {
          name: 'MongoDB',
          category: 'web development'
        },
        {
          name: 'React',
          category: 'software development'
        }
      ]