1

ng2-dndソート可能なコンテナーを使用しようとしています。

以下は私のコンポーネントhtmlです

<div class="row">
        <div class="col-sm-3">
            <div class="panel panel-success">
                <div class="panel-heading">Source List</div>
                    <div class="panel-body">
                        <ul class="list-group" dnd-sortable-container [sortableData]="sourceList">
                            <li *ngFor="let item of sourceList; let x = index" class="list-group-item"
                                dnd-sortable [sortableIndex]="x" [dragEnabled]="true"
                                [dragData]="item">{{item.name}}</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div dnd-droppable class="panel panel-info" (onDropSuccess)="dropSuccess($event)">
                    <div class="panel-heading">Destination List</div>
                    <div class="panel-body">
                        <ul class="list-group" dnd-sortable-container [sortableData]="destList">
                            <li *ngFor="let item of destList; let x = index" class="list-group-item"
                                dnd-sortable [sortableIndex]="x" [dragEnabled]="true"
                                [dragData]="item">{{x+1}} - {{item.name}}</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

ノード6.9.1で実行すると、まったく問題なく動作します

しかし、ノード 10.10.0 で実行すると、コンポーネントのロード時に次のエラーが発生します。

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[SortableComponent -> ElementRef]: 
  StaticInjectorError(Platform: core)[SortableComponent -> ElementRef]: 
    NullInjectorError: No provider for ElementRef!
Error: StaticInjectorError(AppModule)[SortableComponent -> ElementRef]: 
  StaticInjectorError(Platform: core)[SortableComponent -> ElementRef]: 
    NullInjectorError: No provider for ElementRef!
    at _NullInjector.get (core.js:1003)
    at resolveToken (core.js:1301)
    at tryResolveToken (core.js:1243)
    at StaticInjector.get (core.js:1111)
    at resolveToken (core.js:1301)
    at tryResolveToken (core.js:1243)
    at StaticInjector.get (core.js:1111)
    at resolveNgModuleDep (core.js:10896)
    at NgModuleRef_.get (core.js:12129)
    at resolveDep (core.js:12619)
    at _NullInjector.get (core.js:1003)
    at resolveToken (core.js:1301)
    at tryResolveToken (core.js:1243)
    at StaticInjector.get (core.js:1111)
    at resolveToken (core.js:1301)
    at tryResolveToken (core.js:1243)
    at StaticInjector.get (core.js:1111)
    at resolveNgModuleDep (core.js:10896)
    at NgModuleRef_.get (core.js:12129)
    at resolveDep (core.js:12619)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at eval (zone.js:873)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4751)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.invokeTask [as invoke] (zone.js:500)
    at invokeTask (zone.js:1540)

ng2-dnd の代わりにng2-dragulaも使用しようとしました。でも同じ結果。ノード 6.9.1 では問題なく動作しますが、ノード 10.10.0 では同じエラーで失敗します。

tsコードで更新中

以下は私の app.module.ts です

@NgModule({
  declarations: [
    AppComponent,
    KeypadDialogComponent, CardboardDialogComponent, MessageDialogComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    BrowserAnimationsModule,
    MatTabsModule,
    FormsModule, ReactiveFormsModule,
    MatDialogModule, MatFormFieldModule, MatInputModule,
    SchedulingModule, AppRoutingModule, InterceptorModule,
    DndModule.forRoot()//, DragulaModule.forRoot()
  ],
  exports: [
    MatTabsModule
  ],
  providers: [DataService,
              SchedulingService,
              SchedulingFactoryService, RequesterService],
  bootstrap: [AppComponent],
  entryComponents: [KeypadDialogComponent, CardboardDialogComponent,  MessageDialogComponent]
})
export class AppModule { }

コンポーネントを含む Scheduling.module.ts

@NgModule({
  imports: [
    CommonModule,
    MaterialModule,
    FormsModule, ReactiveFormsModule,
    DndModule//, DragulaModule
  ],
  declarations: [SchedulingComponent, TeamComponent],
  exports: [SchedulingComponent,
            MaterialModule,// DndModule,
            FormsModule, ReactiveFormsModule]
})

およびコンポーネント ファイル team.component.ts 

@Component({
  selector: 'app-team',
  templateUrl: './team.component.html',
  styleUrls: ['./team.component.scss']
})
export class TeamComponent implements OnInit {

  sourceList: ['Player1', 'Player2',' Player3'];

  destList: ['Player4', 'Player5', 'Player6'];

  constructor(private router: Router, private schedulingService: SchedulingService,
    private route: ActivatedRoute, private teamFactory: TeamFactoryService,
    private requester: RequesterService, private dragulaService: DragulaService) { }

  ngOnInit() {

  }


  dropSuccess($event: any) {
      console.log($event)
      console.log(this.sourceList)
      console.log(this.destList)
  }

}
4

1 に答える 1

1

tsconfig.jsonファイルに次のコードを追加するとcompilerOptions、問題が解決しました。

"paths": {
      "@angular/*": ["node_modules/@angular/*"]
    }
于 2018-09-14T05:11:18.493 に答える