Angular - cdkDrag не работает с тегом span

Я использую модуль перетаскивания Angular Material. Как бы то ни было, cdkDrag не работает с span и несколькими другими тегами, которые я наблюдал, такими как тег a.

component.html

<div class='user' *ngFor='let user of usersTask; let i = index'>
  User:  {{i}}
  <span class='task' *ngFor='let task of user' cdkDropList cdkDrag>
    {{task}}
  </span>
</div>

component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'some-root',
  templateUrl: './some.component.html',
  styleUrls: ['./some.component.scss']
})
export class SomeComponent {
  usersTask = [[
    'Get to work',
    'Pick up groceries',
    'Go home',
    'Fall asleep'
  ],[
    'Get up',
    'Brush teeth',
    'Take a shower',
    'Check e-mail',
    'Walk dog'
  ]];
}

Но это работает, если я заменю span тегом div.

Любая идея, почему это происходит? И как решить этот вопрос?

Заранее спасибо!


typescript angular angular-material angular-cdk angular-cdk-drag-drop
person ngShravil.py    schedule 17.06.2020    source источник
comment
вам нужен cdkDragList и разные cdkDrag внутри cdkDragList - не может быть одного и того же тега -   -  person Eliseo    schedule 17.06.2020
comment
Я не понял, не могли бы вы объяснить больше, с несколькими примерами?   -  person ngShravil.py    schedule 17.06.2020
comment
у вас есть в <span cdkDropList cdkDrag>, я полагаю, вы хотите <div *ngFor=".." cdkDropList><span *ngFor=".." cdkDrag> (я положил в способ ответа)   -  person Eliseo    schedule 17.06.2020

Ответы (1)


arrow_upward
0
arrow_downward

Посмотрите, что cdkDropList находится в "div", а не в "span"

<div class='user' *ngFor='let user of usersTask; let i = index' cdkDropList >
  User:  {{i}}
  <span class='task' *ngFor='let task of user' cdkDrag>
    {{task}}
  </span>
</div>
person Eliseo    schedule 17.06.2020