如何维护索引状态（列表中项目的位置）并使用角度下拉进行传输？

Question

我可以在列表中添加项目并将它们存储在 Firestore 中，我的应用程序使用 Angular 拖放（主列表）从 Firestore 加载列表，然后我还有 3 个拖放。

Drag and Drops 会从上到下进行神奇的排列和排序，但是每当我刷新或切换路线时，它都会回到默认位置。

然后每当我将数据从主列表传输到其他 3 个时，它只显示 [object, Object]

我是 Angular 的新手，我真的坚持这个。

我已经尝试过使用 pre tag 命令和其他索引语法，但是只要包含 firestore 数据，我就无法捕捉到 Angular 拖放逻辑。

主任务列表 - HTML 组件

  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>

主要任务列表 - TS 组件

 //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 个拖放 HTML 组件

    <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 个拖放 TS 组件

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

每当我刷新它时，它都会回到默认位置 // 控制台上没有错误 // 可能只是我缺乏数据绑定知识。

Answer 1

我认为你正在寻找的是获取索引，你可以这样做将它添加到 ngFor 句子 *ngFor="let item of done; let i = index" 所以，i 变量将获取索引数组

Answer 2

我希望这能正常工作：->

<ul>
  <li *ngFor="let item of items; index as i">
    {{i}} {{item}}
  </li>
</ul>