끌어서 놓기 중첩 목록

Question

과일 목록과 바구니 목록이 있습니다. 과일 한 개를 골라 하나의 바구니에 넣어야합니다. 드래그 앤 드롭 개념을 구현하기 위해 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> 

출력 : 당신이 그들 모두를 위해 과일을 저장하는 하나의 fruitsInBasket 배열을 사용하고 있기 때문에

Answer 1

모든 바구니에 같은 열매를보고있는 이유입니다.

이 작업을 수행하는 가장 좋은 방법은 각각의 바구니에 별도의 배열을 사용하고 드롭 된 과일을 onDropSuccess에 밀어 넣는 것입니다. 문서 here을 확인하십시오.

Answer 2

이 줄은 당신이 그들 중 하나의 열매를 삭제할 때 그래서, 당신이 그들 모두에 드롭, 문제

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

당신은 모든 상자에 동일한 데이터를 저장하는 것입니다.

는 각 바구니에 대한 별도의 데이터 저장소를 유지하고 염두에두고,

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

에 fruitsInBasket의 유형을 변경하고 구성 요소를 다시 작성.