拖放嵌套列表

我有一个水果列表和篮子列表。我需要挑一个水果并放在一个篮子里。我使用this tutorial来实现拖放概念。但我不能把水果放在一个篮子里。如果我把一个水果拖放到篮子里，所有的篮子都会得到那个水果。拖放嵌套列表

我知道问题在于这一行，我不应该为每个篮子使用同名fruit。我需要动态分配它。或者有没有更好的方式来做到这一点。任何意见将是有益的。谢谢。

<li *ngFor="let fruit of fruitsInBasket; let i = index" class="list-group-item" dnd-sortable [sortableIndex]="i">{{fruit.name}}</li>

这里是我的代码：

app.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    listBaskets: Array<Basket> = [ 
    { 
     id: 1, name: 'Basket 1' 
    }, { 
     id: 2, name: 'Basket 2' 
    }, { 
     id: 3, name: 'Basket 3' 
    }, { 
     id: 4, name: 'Basket 4' 
    },]; 
    listFruits: Array<Fruit> = [ 
    { 
     id: 1, name: 'Apple' 
    }, { 
     id: 2, name: 'Orange' 
    }, { 
     id: 3, name: 'Mango' 
    }, { 
     id: 4, name: 'Strawberry' 
    },]; 
    fruitsInBasket: Array<Fruit> = []; 
    constructor() { } 

} 

export interface Basket { 
    id: number; 
    name: string; 
} 
export interface Fruit { 
    id: number; 
    name: string; 
}

app.component.html

<div class="row"> 
    <div class="col-sm-3"> 
    <div class="panel panel-warning"> 
     <div class="panel-heading"> 
     Available Baskets 
     </div> 
     <div class="panel-body"> 
     <ul class="list-group"> 
      <div class="panel panel-warning" *ngFor="let basket of listBaskets; let boxer=index"> 
      <div class="panel-heading"> 
       {{basket.name}} 
      </div> 
      <div class="panel-body" dnd-sortable-container [dropZones]="['boxers-zone']" [sortableData]="fruitsInBasket"> 
       <ul class="list-group"> 
       <li *ngFor="let fruit of fruitsInBasket; let i = index" class="list-group-item" dnd-sortable [sortableIndex]="i">{{fruit.name}}</li> 
       </ul> 
      </div> 
      </div> 
     </ul> 
     </div> 
    </div> 
    </div> 
    <div class="col-sm-3"> 
    <div class="panel panel-success"> 
     <div class="panel-heading"> 
     Fruits 
     </div> 
     <div class="panel-body" dnd-sortable-container [dropZones]="['boxers-zone']" [sortableData]="listFruits"> 
     <ul class="list-group"> 
      <li *ngFor="let fruit of listFruits; let i = index" class="list-group-item" dnd-sortable [sortableIndex]="i">{{fruit.name}}</li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</div>

输出：

来源

2016-12-05 Ranjith Varadan

为什么你看到了同样的水果中的所有篮子的原因是因为您只使用一个fruitsInBasket阵列来存储水果所有的人。

完成此操作的最佳方法是对每个篮子使用单独的数组，并将丢弃的水果推到可丢弃的onDropSuccess上。查看文档here。

来源

2016-12-05 07:05:17 Obaid

此行是你的问题

// app.component.ts 
... 
fruitsInBasket: Array<Fruit> = [];

你存储所有的格子，相同的数据，所以当你在其中的一个掉落的水果，就在所有的人都放弃它。

考虑改变fruitsInBasket类型

// app.component.ts 
... 
fruitsInBasket: { [basket: number]: Array<Fruit> };

和重写组件，牢记你保持每个篮子单独的数据存储。

来源

2016-12-05 07:07:43 ovangle

拖放嵌套列表

回答

相关问题