创建一个 Angular 可调整大小的水平卡片

问题描述

我正在按照此 Stackblitz Link 创建一个可调整大小的有角度的卡片布局，如下图所示。 resizable card layout 在这里，当我向右或向左拖动顶部标题时，需要调整卡片内容和标题的大小，但我的问题是拖动属性在我的代码中不起作用

我的 HTML 代码：

<div class="container">
  <div class="row">
    <div class="col-3" [resizableMinWidth]=30 appResizable>
      SNO
    </div>
    <div class="col-3" [resizableMinWidth]=30 appResizable>
      Name
    </div>
    <div class="col-3" [resizableMinWidth]=30 appResizable>
      Desigination
    </div>
  </div>
  <div class="card">
    <div class="row">
      <div class="col-3">
        01
      </div>
      <div class="col-3">
        Sam
      </div>
      <div class="col-3">
        SE
      </div>
    </div>
  </div>
</div>

我的 CSS 代码：

.container {
    display:flex;
    justify-content:flex-start;
    flex-direction: column;
  }

解决方法

您是否将指令添加到模块中？在属于您的 module.ts 的声明部分添加 ResizableDirective 很重要 @NgModule({ imports: [ BrowserModule,FormsModule ],declarations: [ AppComponent,ResizableDirective ],bootstrap: [ AppComponent ] }) 如果不是这种情况，请让我知道寻找其他原因。 :) 如果您包含堆栈跟踪以及文件 .ts

，那就太好了