我无法让丢弃的事件在 WebStorm Angular Material 项目中工作

Question

虽然我从 1991 年开始编程（是的，我已经老了），但这是我第一次深入 Angular，我正在尝试使用 WebStorm 2021.2.3 创建前端 restful界面。最终的结果将是 desktop/server 个图标的可拖动图像，每个图标上都有一个菜单，可以启用其他操作以及表示所有这些图标之间的连接的线条。全部基于在我的工作 restful 中间件和这个 Angular 前端之间来回传递的 JSON 对象。

当然，我连最基本的东西都学不会 - 所以就是这样。

我目前有以下代码：

import {Component} from '@angular/core';
import {CdkDragExit} from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-device-component',
  templateUrl: './device-component.component.html',
  styleUrls: ['./device-component.component.css']
})
export class DeviceComponentComponent {
  exited(event: CdkDragExit<string[]>) {
    console.log('Exited', event.item.data);
  }
}

以及我的组件前端

<div class="example-box" cdkDrag (cdkDragExited)="exited($event)">
<mat-card class="example-card">
  <mat-card-header>

  </mat-card-header>
  <img mat-card-image src="https://icons.iconarchive.com/icons/dakirby309/simply-styled/256/Desktop-Windows-icon.png" alt="Windows 10">
  <mat-card-content>
      Windows 10 Machine
      <br /> Location 192.168.1.1
  </mat-card-content>
  <mat-card-actions>

  </mat-card-actions>
</mat-card>
</div>

主要app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatNativeDateModule} from '@angular/material/core';
import {HttpClientModule} from '@angular/common/http';

import {AppComponent} from "./app.component";
import {DeviceComponentComponent} from "./device-component/device-component.component";
import {MatCardModule} from "@angular/material/card";
import { DragDropModule } from '@angular/cdk/drag-drop';
import {MatDialogModule} from "@angular/material/dialog";


/* the AppModule class with the @NgModule decorator */
@NgModule({
  declarations: [
    AppComponent,
    DeviceComponentComponent
  ],
  imports: [
    BrowserAnimationsModule,
    BrowserAnimationsModule,
    BrowserModule,
    FormsModule,
    HttpClientModule,
    MatNativeDateModule,
    ReactiveFormsModule,
    MatCardModule,
    MatDialogModule,
    DragDropModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

还有我疯狂的高级主应用

<div class="content" role="main">
  <app-device-component></app-device-component>
</div>

当我在终端 window 中使用 npm 运行 start 启动这个组件时，我可以整天拖动卡片，但我从来没有得到控制台输出。

有人可以帮我解决这个问题吗？

Answer 1

如您在 official doc 中所见，您需要容器（使用 CdkDropList 指令）才能触发 cdkDragExited 事件侦听器。对于您的情况，我建议使用 cdkDragMoved 事件侦听器。

我无法让丢弃的事件在 WebStorm Angular Material 项目中工作

I Cannot Get Dropped Event to Work in WebStorm Angular Material Project

javascript

angular

webstorm