1

I'm able to add items on a list and store them in Firestore, my app loads the list from the firestore using Angular Drag and Drop (main list) then I have 3 more Drag and Drop.

Drag and Drops works its magic arranging and sorting from top to bottom,however whenever I refresh or switch routes, it goes back to its default position.

Then whenever I transfer the data from the mainlist to the other 3, it only shows [object, Object]

I'm new to Angular and really stuck on this one.

I already tried using pre tag command and other indexing syntax however I'm not able to catch's Angular Drag and Drop logic whenever firestore data is included.

Main Task List - HTML Component

  cdkDropList id="tasklist"
  cdkDropListConnectedTo="onholdlist"
  [cdkDropListData]="listtask" << DATA IS FROM FIRESTORE
  class="example-list"
  (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let listtask of listtask" cdkDrag 
   (click)="openTskDialog">
     <mat-list dense>
      <mat-list-item> 
        <div class="tasklist">
        <div class="taskcontainer">  {{listtask.taskname}}</div> 
   </div>

Main Task List - TS Component

 //this will handle the data from the model and fetch it into an array
     listtask : taskdb[]; << model that stores/fetch the data from firestore

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

  }

3 other Drag and Drop HTML Component

    <div cdkDropListGroup>
            <div class="onhold-container">
                <h4>On Hold</h4>

                <div
                  cdkDropList id="onholdlist"
                  cdkDropListConnectedTo="tasklist"
                  [cdkDropListData]="onhold"
                  class="example-list"
                  (cdkDropListDropped)="drop($event)">
                  <div class="example-box" *ngFor="let item of onhold" cdkDrag>{{item}}</div>
                </div>
              </div>


            <div class="todo-container">
              <h4>On Going</h4>

              <div
                cdkDropList
                [cdkDropListData]="todo"
                class="example-list"
                (cdkDropListDropped)="drop($event)">
              <div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
            </div>
          </div>

          <div class="done-container">
            <h4>Done</h4>

            <div
                cdkDropList
              [cdkDropListData]="done"
              class="example-list"
              (cdkDropListDropped)="drop($event)">
              <div class="example-box" *ngFor="let item of done" cdkDrag>{{item}}</div>
      </div>
    </div>

3 other Drag and Drop TS Component

export class TaskpanelComponent implements OnInit {


  onhold=[ 
  ]
  todo = [

  ];

  done = [

  ];

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

Whenever I refresh it, it goes back to default position // no error on console // probably just my databinding lack of knowledge.

Constantin Beer
  • 5,447
  • 6
  • 25
  • 43
Carlo A
  • 117
  • 9
  • there is a lot of code, I believe it would be helpfull to have a https://stackoverflow.com/help/minimal-reproducible-example – Crocsx Aug 29 '19 at 02:50

2 Answers2

0

I think that you are finding is get the index and you can do this add it to ngFor sentence *ngFor="let item of done; let i = index" so, i variable will get the index array

David
  • 61
  • 4
  • Hi! David, tried it even the current version = let i = index" [attr.data-index]="i" seems doesn't work – Carlo A Aug 29 '19 at 06:17
  • maybe this post help you https://stackoverflow.com/questions/35405618/ngfor-with-index-as-value-in-attribute – David Aug 29 '19 at 06:27
0

I hope this works fine:->

<ul>
  <li *ngFor="let item of items; index as i">
    {{i}} {{item}}
  </li>
</ul>
pk_teckie
  • 147
  • 3
  • 17
  • it sets the index order but whenever i refresh the page it goes back example item 1 item 2 Item 3 I have switch the position Item 3 Item 1 Item 2 it's okay i can switch them as much as i want, but when i log out or refresh the page, it goes back to item 1 item 2 item 3 – Carlo A Aug 29 '19 at 08:27