[Fixed] Angular Material drag and drop empty list not working

Issue

I’m trying to implement 4 drag and drop areas, plan 1 year 1 column, plan 1 year 2 column, plan 1 year 3 column, plan 1 year 4 column, modlist1, 1 with a non-empty array (modlist1), the others with empty arrays each. However I am getting this error:

error TS2345: Argument of type ‘CdkDragDrop<never[], any>’ is not assignable to parameter of type ‘CdkDragDrop<string[], string[]>’.
The types of ‘container.dropped.emit’ are incompatible between these types.
Type ‘(value?: CdkDragDrop<never[], any> | undefined) => void’ is not assignable to type ‘(value?: CdkDragDrop<string[], any> | undefined) => void’.
Types of parameters ‘value’ and ‘value’ are incompatible.
Type ‘CdkDragDrop<string[], any> | undefined’ is not assignable to type ‘CdkDragDrop<never[], any> | undefined’.
Type ‘CdkDragDrop<string[], any>’ is not assignable to type ‘CdkDragDrop<never[], any>’.
The types of ‘container.data’ are incompatible between these types.
Type ‘string[]’ is not assignable to type ‘never[]’.

207 (cdkDropListDropped)="onDrop($event)"

Here are is my html code:

              <!-----------------------------plan 1 year 1 column-------------------------------------------->
                <div class="col droppable example-list" cdkDropList
                  #P1Y1="cdkDropList"
                  [cdkDropListData]="addedP1Y1"
                  (cdkDropListDropped)="onDrop($event)"
                  [cdkDropListConnectedTo]="[modlist1, P1Y2, P1Y3, P1Y4]"
                  id = "1">
                  <h2>Year 1</h2>
                  <div class= "example-box" *ngFor="let item of addedP1Y1" [cdkDragData]="item" cdkDrag>
                    {{item}}
                  </div>   
                </div>
                
                <!-----------------------------plan 1 year 2 column-------------------------------------------->
                <div class="col droppable example-list" cdkDropList
                  #P1Y2="cdkDropList"
                  [cdkDropListData]="addedP1Y2"
                  (cdkDropListDropped)="onDrop($event)"
                  [cdkDropListConnectedTo]="[modlist1, P1Y1, P1Y3, P1Y4]"
                  id = "1">
                  <h2>Year 2</h2>
                  <div class= "example-box" *ngFor="let item of addedP1Y2" [cdkDragData]="item" cdkDrag>
                    {{item}}
                  </div>
                </div>
                
                <!-----------------------------plan 1 year 3 column-------------------------------------------->
                <div class="col droppable example-list" cdkDropList
                  #P1Y3="cdkDropList"
                  [cdkDropListData]="addedP1Y3"
                  (cdkDropListDropped)="onDrop($event)"
                  [cdkDropListConnectedTo]="[modlist1, P1Y2, P1Y1, P1Y4]"
                  id = "1">
                  <h2>Year 3</h2>
                  <div class= "example-box" *ngFor="let item of addedP1Y3" [cdkDragData]="item" cdkDrag>
                    {{item}}
                  </div>
                </div>
                
                <!-----------------------------plan 1 year 4 column-------------------------------------------->
                <div class="col droppable example-list" cdkDropList
                  #P1Y4="cdkDropList"
                  [cdkDropListData]="addedP1Y4"
                  (cdkDropListDropped)="onDrop($event)"
                  [cdkDropListConnectedTo]="[modlist1, P1Y2, P1Y3, P1Y1]"
                  id = "1">
                  <h2>Year 4</h2>
                  <div class= "example-box" *ngFor="let item of addedP1Y4" [cdkDragData]="item" cdkDrag>
                    {{item}}
                  </div>
                </div>


            </div>
          </div>

          <!----------plan1 modlist----------------------------------------------------------------->
          <div class="card">
            <div class="card-header">
              <h4 class="card-title">Mod Lists</h4>
            </div>
            <div class="card-body example-list"
                  cdkDropList
                  #modlist1="cdkDropList"
                  [cdkDropListData]="ModList1"
                  (cdkDropListDropped)="onDrop($event)"
                  [cdkDropListConnectedTo]="[modlist1, P1Y1, P1Y2, P1Y3, P1Y4]"
                  id = "1">
                <div class="example-box" *ngFor="let item of ModList1" [cdkDragData]="item" cdkDrag>
                  {{item}}
                </div>
            </div>
          </div>

        </div>

Here is my ts code:

import { Component, OnInit } from '@angular/core';
import {CdkDrag, CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';
import { disableDebugTools } from '@angular/platform-browser';
@Component({
  selector: 'app-module',
  templateUrl: './module.component.html',
  styleUrls: ['./module.component.css']
})
export class ModuleComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  ModList1 = [
    'CZ2001',
    'CZ2002',
    'CZ2003',
    'CZ2004',
    'CZ2005',
    'CZ2006',
    'CZ2007',
    'CZ3002'
  ];
 
  addedP1Y1 =[
    
  ];
  
  addedP1Y2 =[
    
  ];

  addedP1Y3 =[
    
  ];

  addedP1Y4 =[
     
  ];
     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);
        return;                  
      }
    }
  } 

Solution

Give a type to your arrays and most probably the problem will disappear.

For example:

ModList1: string[] = [
    'CZ2001',
    'CZ2002',
    'CZ2003',
    'CZ2004',
    'CZ2005',
    'CZ2006',
    'CZ2007',
    'CZ3002'
  ];

 addedP1Y1: string=[];