Question

我已将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"

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"

它允许我仅对一个列表进行重新排序，并且我希望能够将项目从一个列表拖到另一个列表。遵循tutorial之后-出现错误。

不确定为什么它不起作用，以及SO上显示的先前问题，表明没有导入DragDropModule，而在我的情况下确实如此。

有人知道我需要做什么才能使它正常工作吗？

Answer 1

可以导入browserModule

  import { BrowserModule } from '@angular/platform-browser';

  imports: [
             .... //other modules
             BrowserModule
           ]

没有将“ exportAs”设置为“ cdKDropList”的指令

1 个答案: