javascript - 可扩展性不起作用

我正在尝试调整图片的大小，但是将鼠标移到上面时，图片只是移动到新位置而没有调整大小。

<img id=image1
       ngDraggable
       mwlResizable
       [enableGhostResize]="true"
       [resizeEdges]="{bottom: true, right: true, top: true, left: true}"
       (resizeEnd)="onResizeEnd($event)"
       src="{{user.picture}}">

component.ts:

import { ResizeEvent } from "angular-resizable-element";

export class Component{

  onResizeEnd(event: ResizeEvent): void {
    console.log('Element was resized', event);
  }
}

app.module:

...
import {ResizableModule} from "angular-resizable-element";


@NgModule({
  declarations: [
    AppComponent,
    MainComponent
  ],
  imports: [
    BrowserModule,

    HttpClientModule,
    AngularDraggableModule,
    ResizableModule
  ],
  providers: [GetJsonService],
  bootstrap: [AppComponent]
})
export class AppModule { }

我按书做了一切

最佳答案

万一它仍然对任何人有用。您需要在onResize End函数中应用宽度和高度:
将组件代码更改为此:

import { ResizeEvent } from "angular-resizable-element";

export class Component{
   style: {};
   onResizeEnd(event: ResizeEvent): void {
      this.style = {
        width: `${event.rectangle.width}px`,
        height: `${event.rectangle.height}px`
      };
  }
}

将HTML代码更改为此:

<img id=image1
       ngDraggable
       mwlResizable
       [enableGhostResize]="true"
       [resizeEdges]="{bottom: true, right: true, top: true, left: true}"
       (resizeEnd)="onResizeEnd($event)"
       src="{{user.picture}}" [ngStyle]="style">

关于javascript - 可扩展性不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49821018/