代码之家 › 专栏 › 技术社区 › Alfa Bravo

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

angular-material angular

Alfa Bravo · 技术社区 · 6 年前

我得到以下错误: ERROR TypeError: Cannot assign to read only property '2' of string 'One' 从下面的datalist,我创建了模仿我的实际数据看起来像的形式,和模板视图,我看到了使用从角度材料文档动态列表像这样。但即使他们说了该做什么,他们也没有举一个例子。。

我无法让以下各项工作:

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>

2 回复 | 直到 6 年前

KimCindy 6 年前

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

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>

Here's a duplicate in Stackblitz

Riki Syahputra 6 年前

如果要在数组之间移动项,可以标记每个数组 cdkDropList 使用 #mark-name cdkDropListConnectedTo 指令来连接它们。

如果 cdkDropList目录 不知道,你可以用 cdkDropListGroup 指令来设置 cdkDropList目录 自动地

例如:

<div cdkDropListGroup>
    <div cdkDropList *ngFor="let list of lists; let i=index;"
         [cdkDropListData]="list.number" 
         (cdkDropListDropped)="drop($event)">{{list.number}}

           <div cdkDrag *ngFor="let item of list.amount"
                [cdkDragData]="item"  
                (mouseenter)="enter(i)" 
                style="border:1px solid black">{{item}}
           </div>
    </div>
</div>

Stackblitz示例

这里有一些例子 code copied from angular material example

dynamic number of list

希望有帮助,干杯!