Two-way data binding avec un drag and drop

**night37550** · 27/12/2019, 21h05

Bonjour à tous

Je viens vers vous car j'ai besoin de vos lumières

J'ai deux tableaux d'objet avec une possibilité d'effectuer un drag and drop d'un tableau vers l'autre ( que dans un seul sens),cela effectue une copie de l’élément dragué .

J'aimerais pouvoir modifier le contenu texte uniquement dans le tableau qui reçoit les élément et non pas dans le tableau d'origine , hélas le code mis en place me modifie les données sur les deux tableaux :colere:

need help

Merci d'avance !

fichier html:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<div class="general-container">
    <div
        cdkDropList
        #bibliothequeArticlesList="cdkDropList"
        [cdkDropListData]="bibliothequeArticles"
        [cdkDropListConnectedTo]="[depotArticlesList]"
        class="bibliotheque-container"
        (cdkDropListDropped)="drop($event)">
        <div class="box" *ngFor="let article of bibliothequeArticles" cdkDrag>
            {{article.label}}</div>
 
    </div>
    <div
        cdkDropList
        #depotArticlesList="cdkDropList"
        [cdkDropListData]="depotArticles"
        class="depot-container"
        (cdkDropListDropped)="drop($event)">
             <button class="box" *ngFor="let article of depotArticles" cdkDrag>
                {{article.label}}<br>
                {{article.content}}
                <button class="btn btn-xs btn-outline-primary" (click)="open(content)">Modifier le texte</button>
                <ng-template #content let-c="close" let-d="dismiss">
                    <div class="modal-header">
                      <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    <div class="modal-body">
                        <input type="text" class="form-control" [(ngModel)]="article.label">
                        <input type="text" class="form-control" [(ngModel)]="article.content">
 
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-primary" (click)="c('Save click')">Save</button>
                    </div>
                  </ng-template>
            </button>
    </div> 
</div>

fichier ts

Code TypeScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
import { Component} from '@angular/core';
import {CdkDragDrop, moveItemInArray, copyArrayItem} from '@angular/cdk/drag-drop';
import { NgbModalConfig, NgbModal } from '@ng-bootstrap/ng-bootstrap';
 
 
 
 
 
 
 
@Component({
  selector: 'app-bibliotheque',
  templateUrl: './bibliotheque.component.html',
  styleUrls: ['./bibliotheque.component.css']
})
 
export class BibliothequeComponent  {
 
  constructor(config: NgbModalConfig, private modalService: NgbModal) {
    // customize default values of modals used by this component tree
    config.backdrop = 'static';
    config.keyboard = false;
 
  }
 
 
 
 
  bibliothequeArticles = [
    {
      id: 1,
      label: "titre1", 
      content: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia blanditiis amet sed doloribus temporibus. Quaerat, quibusdam, incidunt ab amet, esse nostrum perspiciatis perferendis neque eos ad beatae voluptas dolore doloremque."
    },
    {
      id: 2,
      label: "titre2", 
      content: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia blanditiis amet sed doloribus temporibus. Quaerat, quibusdam, incidunt ab amet, esse nostrum perspiciatis perferendis neque eos ad beatae voluptas dolore doloremque."
    },    
    {
      id: 3,
      label: "titre3", 
      content: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia blanditiis amet sed doloribus temporibus. Quaerat, quibusdam, incidunt ab amet, esse nostrum perspiciatis perferendis neque eos ad beatae voluptas dolore doloremque."
    },    
    {
      id: 4,
      label: "titre4", 
      content: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia blanditiis amet sed doloribus temporibus. Quaerat, quibusdam, incidunt ab amet, esse nostrum perspiciatis perferendis neque eos ad beatae voluptas dolore doloremque."
    },    
    {
      id: 5,
      label: "titre5", 
      content: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia blanditiis amet sed doloribus temporibus. Quaerat, quibusdam, incidunt ab amet, esse nostrum perspiciatis perferendis neque eos ad beatae voluptas dolore doloremque."
    },    
    {
      id: 6,
      label: "titre6", 
      content: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia blanditiis amet sed doloribus temporibus. Quaerat, quibusdam, incidunt ab amet, esse nostrum perspiciatis perferendis neque eos ad beatae voluptas dolore doloremque."
    },
 
  ];
  depotArticles = [
    {
      id: 6,
      label: "titre6", 
      content: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia blanditiis amet sed doloribus temporibus. Quaerat, quibusdam, incidunt ab amet, esse nostrum perspiciatis perferendis neque eos ad beatae voluptas dolore doloremque."
    },
 
  ]
 
  drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
 
 
    } else {
      copyArrayItem(event.previousContainer.data,
                        event.container.data,
                        event.previousIndex,
                        event.currentIndex);                        
    }
  }   
 
  open(content) {
    this.modalService.open(content);
    Object.seal(this.bibliothequeArticles)
  }
 
 
}