Почему Angular drag and drop cdk не работает? - PullRequest
Новая
       19

Почему Angular drag and drop cdk не работает?

0 голосов
/ 29 апреля 2019

Я занимаюсь разработкой приложения Angular (v7.3.8), и мне нужно реализовать горизонтальный список с перетаскиванием на определенной странице моего приложения с именем «test.page». Поэтому я использовал новую функцию Angular v7 cdk drag-and-drop, следуя этой документации:

https://material.angular.io/cdk/drag-drop/examples

В моем app.module.ts у меня есть 

import { DragDropModule } from '@angular/cdk/drag-drop';
import ......

@NgModule({
    ....
    imports: [..., DragDropModule ],
    ... })

В моем test.page.html у меня есть: 

<div cdkDropList cdkDropListOrientation="horizontal" class="example-list" (cdkDropListDropped)="drop($event)">
   <div class="example-box" *ngFor="let answer of answers" cdkDrag>{{answer}}</div>
</div>

И в моем test.page.ts у меня есть: 

import { Component, OnInit } from '@angular/core';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
import ....

@Component({
  selector: 'app-test',
  templateUrl: './test.page.html',
  styleUrls: ['./test.page.css'],
})
export class TestPage implements OnInit {
    answers = [ ....... ];

    drop(event: CdkDragDrop<string[]>) {
        moveItemInArray(this.answers, event.previousIndex, event.currentIndex);
    }

    .....
    }

К сожалению, этот код не работает для меня (элементы списка не перемещаются с помощью перетаскивания), и я не понимаю, почему. Кто-нибудь может мне помочь?

...