Нет директивы с "exportAs", установленным в "cdKDropList" - PullRequest
Новая
       55

Нет директивы с "exportAs", установленным в "cdKDropList"

0 голосов
/ 29 октября 2019

Я импортировал DragDropModule в мой модуль очередей, в котором находится компонент, на котором я использую функцию перетаскивания: 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HometeamComponent } from './hometeam/hometeam.component';
import { AwayteamComponent } from './awayteam/awayteam.component';
import { LineupsComponent } from './lineups.component';
import { AwayteamService } from './awayteam/awayteam.service';
import { HometeamService } from './hometeam/hometeam.service';
import { NationalityService } from './nationality.service';
import { PositionsService } from './positions.service';
import { NgxSmartModalModule } from 'ngx-smart-modal';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { SharedModule } from 'src/app/shared/shared.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { PlayerComponent } from './player/player.component';

@NgModule({
  imports: [
    CommonModule,
    NgxSmartModalModule,
    FormsModule,
    HttpClientModule,
    SharedModule,
    BrowserAnimationsModule,
    DragDropModule
  ],
  declarations: [
    HometeamComponent,
    AwayteamComponent,
    LineupsComponent,
    PlayerComponent
  ],
  providers: [
    AwayteamService,
    HometeamService,
    NationalityService,
    PositionsService
  ],
  exports: [
    HometeamComponent,
    AwayteamComponent
  ]
})
export class LineupsModule { }

В целях безопасности я импортировал его в модуль над этим, а также просто для того, чтобыконечно, я импортировал его в app.module.ts - но со следующим кодом я получаю эту ошибку: 

There is no directive with "exportAs" set to "cdKDropList"

code component.html 

<div class="players">
<span
cdKDropList
#fullSquad="cdKDropList"
[cdkDropListData]="players"
[cdkDropListConnectedTo]="selectedTeam"
(cdkDropListDropped)="drop($event)">
  <h5 [style.font-family]="config.header_font.data.font_family">Full Squad</h5>
  <ul *ngFor="let player of players" cdkDrag>
    <app-player 
    [player]="player" 
    [config]="config" 
    (openModal)="editPlayer($event)"></app-player>
  </ul>
</span>


<div class="players selected" 
    *ngIf="startingPlayers"
    [cdkDropListData]="startingPlayers"
    #selectedTeam="cdKDropList"
    [cdkDropListConnectedTo]="fullSquad"
    (cdkDropListDropped)=”drop($event)”
    >
    <h5 [style.font-family]="config.header_font.data.font_family">Starting XI</h5>
    <ul *ngFor="let player of startingPlayers; let i = index">
      <li>
        <ng-container *ngIf="i == 0"><img src="../assets/img/goalie-shirt.svg" alt="goalkeeper shirt"></ng-container>
        <ng-container *ngIf="i !== 0">
          <svg [style.fill]="'#' + config.club_shirt.data.hex_code" id="shirt" viewBox="0 0 32 32">
            <defs></defs>
            <path id="path854" class="cls-1"
                  d="M19.25,1a5.15,5.15,0,0,0-1.15.18,12.94,12.94,0,0,1-4.12,0c-1.1-.27-1.56-.24-2,.13A14.87,14.87,0,0,1,9.83,2.38C6.85,3.64,6.17,4,5.36,4.81a3.76,3.76,0,0,0-1,1.42,38.4,38.4,0,0,0-1.05,5C3,13,3,12.94,5.92,13.91a6.9,6.9,0,0,0,2.1.47h.72l-.07,5.15c0,2.9-.15,6.33-.26,7.82a12.84,12.84,0,0,0-.08,2.94c.17.38.82.52,3,.64s9.51,0,11-.12,1.54-.06,1.36-3.12a113.21,113.21,0,0,1-.31-12.79l.08-.55.44.05a13.14,13.14,0,0,0,4.77-1.56c.3-.3.26-.78-.27-3.69-.41-2.21-.76-3.3-1.28-4s-1.95-1.56-4.31-2.56a17.9,17.9,0,0,1-2.63-1.29A1.26,1.26,0,0,0,19.25,1Z" />
          </svg>
        </ng-container>
        {{ player }}
      </li>
    </ul>
    <h5 [style.font-family]="config.header_font.data.font_family">The Bench</h5>
    <ul *ngFor="let player of theBench; let i = index">
      <li>
        <ng-container *ngIf="i == 0"><img src="../assets/img/goalie-shirt.svg" alt="goalkeeper shirt"></ng-container>
        <ng-container *ngIf="i !== 0">
          <svg [style.fill]="'#' + config.club_shirt.data.hex_code" id="shirt" viewBox="0 0 32 32">
            <defs></defs>
            <path id="path854" class="cls-1"
                  d="M19.25,1a5.15,5.15,0,0,0-1.15.18,12.94,12.94,0,0,1-4.12,0c-1.1-.27-1.56-.24-2,.13A14.87,14.87,0,0,1,9.83,2.38C6.85,3.64,6.17,4,5.36,4.81a3.76,3.76,0,0,0-1,1.42,38.4,38.4,0,0,0-1.05,5C3,13,3,12.94,5.92,13.91a6.9,6.9,0,0,0,2.1.47h.72l-.07,5.15c0,2.9-.15,6.33-.26,7.82a12.84,12.84,0,0,0-.08,2.94c.17.38.82.52,3,.64s9.51,0,11-.12,1.54-.06,1.36-3.12a113.21,113.21,0,0,1-.31-12.79l.08-.55.44.05a13.14,13.14,0,0,0,4.77-1.56c.3-.3.26-.78-.27-3.69-.41-2.21-.76-3.3-1.28-4s-1.95-1.56-4.31-2.56a17.9,17.9,0,0,1-2.63-1.29A1.26,1.26,0,0,0,19.25,1Z" />
          </svg>
        </ng-container>
        {{ player }}
      </li>
   </ul>
</div>

Если я удалю следующее: 

#fullSquad="cdKDropList"
[cdkDropListData]="players"
[cdkDropListConnectedTo]="selectedTeam"

, это позволит мне изменить порядок только одного списка, и я хочу иметь возможность перетаскивать элементы из одного списка в другой. После этого учебного пособия - появляется ошибка.

Не уверен, почему это не работает, и предыдущие проблемы, показанные на SO, показывают, что DragDropModule не импортирован, что, по моему, это,

Кто-нибудь знает, что мне нужно сделать, чтобы это работало?

...