时间戳

首页 > 解决方案 > 具有动态列表的数组之间的Angular7 cdkDropList

angular - 具有动态列表的数组之间的Angular7 cdkDropList

问题描述

我收到以下错误：ERROR TypeError: Cannot assign to read only property '2' of string 'One' 来自我创建的以下数据列表以模仿我的实际数据的形式，以及我从角度材料文档中看到的用于此类动态列表的模板视图。但是，即使他们说该怎么做，他们也没有举例说明..

我无法使以下工作：

零件：

lists = [];

ngOnInit() {
    this.lists = [{number: 'One', amount: [1, 2, 3, 4]}, {number: 'Two', amount: [5, 6, 7, 8]}, {number: 'Three', amount: [9, 10, 11, 12]}];
}

drop(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);
    }
}

模板：

<div cdkDropList [cdkDropListData]="list.number" *ngFor="let list of lists" (cdkDropListDropped)="drop($event)">
    {{list.number}}
    <div cdkDrag [cdkDragData]="item" *ngFor="let item of list.amount">
        {{item}}
    </div>
</div>

标签： angularangular-material

解决方案

你应该得到你的列表项的实际索引。试试这个：

TS：

activeNumIndex: number;
enter(i) {
    this.activeNumIndex = i;
  }

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

HTML：

<div cdkDropList [cdkDropListData]="list.number" *ngFor="let list of lists; let i=index;" (cdkDropListDropped)="drop($event)">
    {{list.number}}
    <div cdkDrag [cdkDragData]="item" *ngFor="let item of list.amount" (mouseenter)="enter(i)" style="border:1px solid black">
        {{item}}
    </div>
</div>

这是 Stackblitz 中的副本

推荐阅读